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

import React, { useContext, useMemo } from 'react';

import { DndEntryState } from '../../types/file-list.types';
import { ChonkyIconName } from '../../types/icons.types';
import { useDndHoverOpen, useFileDrop } from '../../util/dnd';
import { ChonkyIconContext } from '../../util/icon-helper';
import { c, important, makeLocalChonkyStyles } from '../../util/styles';
import { useDndIcon } from '../file-list/FileEntry-hooks';
import { FolderChainItem } from './FileNavbar-hooks';
import { ToolbarButton } from './ToolbarButton';

export interface FolderChainButtonProps {
  first: boolean;
  current: boolean;
  item: FolderChainItem;
}

export const FolderChainButton: React.FC<FolderChainButtonProps> = React.memo(({ first, current, item }) => {
  const { file, disabled, onClick } = item;
  const { dndIsOver, dndCanDrop, drop } = useFileDrop({
    file,
    forceDisableDrop: !file || current,
  });
  const dndState = useMemo<DndEntryState>(
    () => ({
      dndIsOver,
      dndCanDrop,
      dndIsDragging: false,
    }),
    [dndCanDrop, dndIsOver],
  );
  useDndHoverOpen(file, dndState);
  const dndIconName = useDndIcon(dndState);
  const ChonkyIcon = useContext(ChonkyIconContext);

  const classes = useStyles(dndState);
  const className = c({
    [classes.baseBreadcrumb]: true,
    [classes.disabledBreadcrumb]: disabled,
    [classes.currentBreadcrumb]: current,
  });
  const text = file ? file.name : 'Loading...';
  const icon = first && file?.folderChainIcon === undefined ? ChonkyIconName.folder : file?.folderChainIcon;

  return (
    <div className={classes.buttonContainer} ref={file ? drop : null}>
      {file && dndIconName && (
        <div className={classes.dndIndicator}>
          <ChonkyIcon icon={dndIconName} fixedWidth={true} />
        </div>
      )}
      <ToolbarButton icon={icon} className={className} text={text} disabled={disabled} onClick={onClick} />
    </div>
  );
});

const useStyles = makeLocalChonkyStyles((theme) => ({
  buttonContainer: {
    position: 'relative',
  },
  baseBreadcrumb: {
    color: (dndState: DndEntryState) => {
      let color = theme.palette.text.primary;
      if (dndState.dndIsOver) {
        color = dndState.dndCanDrop ? theme.dnd.canDropColor : theme.dnd.cannotDropColor;
      }
      return important(color);
    },
  },
  disabledBreadcrumb: {
    // Constant function here is on purpose. Without the function, the color here
    // does not override the `baseBreadcrumb` color from above.
    color: () => important(theme.palette.text.disabled),
  },
  currentBreadcrumb: {
    textDecoration: important('underline'),
  },
  dndIndicator: {
    color: (dndState: DndEntryState) => (dndState.dndCanDrop ? theme.dnd.canDropColor : theme.dnd.cannotDropColor),
    backgroundColor: (dndState: DndEntryState) =>
      dndState.dndCanDrop ? theme.dnd.canDropMask : theme.dnd.cannotDropMask,
    lineHeight: `calc(${theme.toolbar.lineHeight} - 6px)`,
    transform: 'translateX(-50%) translateY(-50%)',
    borderRadius: theme.toolbar.buttonRadius,
    height: theme.toolbar.size - 6,
    width: theme.toolbar.size - 6,
    boxSizing: 'border-box',
    position: 'absolute',
    textAlign: 'center',
    left: '50%',
    top: '50%',
    zIndex: 5,
  },
}));