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

import React, { useContext } from 'react';

import { DndEntryState } from '../../types/file-list.types';
import { ChonkyIconContext } from '../../util/icon-helper';
import { c, makeLocalChonkyStyles } from '../../util/styles';
import { useDndIcon } from './FileEntry-hooks';

export interface DnDIndicatorProps {
  className: string;
  dndState: DndEntryState;
}

export const GridEntryDndIndicator: React.FC<DnDIndicatorProps> = React.memo((props) => {
  const { className: externalClassName, dndState } = props;
  const dndIconName = useDndIcon(dndState);
  const classes = useStyles(dndState);
  const ChonkyIcon = useContext(ChonkyIconContext);
  if (!dndIconName) return null;
  const className = c({
    [classes.dndIndicator]: true,
    [externalClassName]: true,
  });
  return (
    <div className={className}>
      <ChonkyIcon icon={dndIconName} />
    </div>
  );
});

const useStyles = makeLocalChonkyStyles((theme) => ({
  dndIndicator: {
    color: (dndState: DndEntryState) =>
      dndState.dndIsOver ? (dndState.dndCanDrop ? theme.dnd.canDropColor : theme.dnd.cannotDropColor) : '#000',
    boxSizing: 'border-box',
    position: 'absolute',
    fontSize: '1.2em',
    opacity: 0.6,
    padding: 6,
    '&:before': {
      borderBottom: '50px solid transparent',
      borderLeft: '50px solid #fff',
      position: 'absolute',
      content: '""',
      zIndex: -1,
      left: 0,
      top: 0,
    },
  },
}));