/**
 * @author Timur Kuzhagaliyev <tim.kuzh@gmail.com>
 * @copyright 2020
 * @license MIT
 */

import React from 'react';
import { useDragLayer } from 'react-dnd';
import { Nullable } from 'tsdef';

import { ChonkyDndFileEntryItem, ChonkyDndFileEntryType } from '../../types/dnd.types';
import { makeGlobalChonkyStyles } from '../../util/styles';

export interface DnDFileListDragLayerProps {}

const layerStyles: React.CSSProperties = {
  position: 'fixed',
  pointerEvents: 'none',
  zIndex: 100,
  left: 0,
  top: 0,
  width: '100%',
  height: '100%',
};
const getItemStyles = (
  initialCursorOffset: Nullable<{ x: number; y: number }>,
  initialFileOffset: Nullable<{ x: number; y: number }>,
  currentFileOffset: Nullable<{ x: number; y: number }>,
) => {
  if (!initialCursorOffset || !initialFileOffset || !currentFileOffset) {
    return {
      display: 'none',
    };
  }
  const x = initialCursorOffset.x + (currentFileOffset.x - initialFileOffset.x);
  const y = initialCursorOffset.y + (currentFileOffset.y - initialFileOffset.y);
  const transform = `translate(${x}px, ${y}px)`;
  return {
    transform,
    WebkitTransform: transform,
  };
};

export const DnDFileListDragLayer: React.FC<DnDFileListDragLayerProps> = () => {
  const classes = useStyles();

  const { itemType, item, initialCursorOffset, initialFileOffset, currentFileOffset, isDragging } = useDragLayer(
    (monitor) => ({
      item: monitor.getItem() as ChonkyDndFileEntryItem,
      itemType: monitor.getItemType(),
      initialCursorOffset: monitor.getInitialClientOffset(),
      initialFileOffset: monitor.getInitialSourceClientOffset(),
      currentFileOffset: monitor.getSourceClientOffset(),
      isDragging: monitor.isDragging(),
    }),
  );
  if (!isDragging || itemType !== ChonkyDndFileEntryType || !item.payload) {
    return null;
  }

  const selectionSize = item.payload.selectedFiles.length;
  return (
    <div style={layerStyles}>
      <div style={getItemStyles(initialCursorOffset, initialFileOffset, currentFileOffset)}>
        <div className={classes.fileDragPreview}>
          <b>{item.payload.draggedFile.name}</b>
          {selectionSize > 1 && (
            <>
              {' and '}
              <strong>
                {selectionSize - 1} other file
                {selectionSize - 1 !== 1 ? 's' : ''}
              </strong>
            </>
          )}
        </div>
      </div>
    </div>
  );
};

const useStyles = makeGlobalChonkyStyles((theme) => ({
  fileDragPreview: {
    boxShadow: `2px 2px 5px ${theme.palette.divider}`,
    backgroundColor: theme.palette.background.default,
    borderRadius: theme.dragLayer.borderRadius,
    fontSize: theme.fontSizes.rootPrimary,
    color: theme.palette.text.primary,
    padding: theme.dragLayer.padding,
    border: theme.dragLayer.border,
    display: 'inline-block',
  },
}));