import { ActionIcon, Box, ColorPicker, Menu } from '@mantine/core';
import { FaSquare, FaCircle, FaHandPaper, FaRegCircle } from 'react-icons/fa';
import { FaMagnifyingGlass, FaPencil } from 'react-icons/fa6';

export enum Tool {
  HAND,
  ZOOM,
  EDIT,
  TOKEN
}

export enum EditTool {
  SQUARE,
  CIRCLE
}

export const defaultColors = [
  '#000000',
  '#1D2B53',
  '#7E2553',
  '#008751',
  '#AB5236',
  '#5F574F',
  '#C2C3C7',
  '#FFF1E8',
  '#FF004D'
];

interface TileControlsProps {
  tool: Tool;
  setTool: (tool: Tool) => void;
  editTool: EditTool;
  setEditTool: (editTool: EditTool) => void;
  colors: string[];
  setColors: (colors: string[]) => void;
  selectedColor: number;
  setSelectedColor: (selectedColor: number) => void;
}

export default function TileControls({
  tool,
  setTool,
  editTool,
  setEditTool,
  colors,
  setColors,
  selectedColor,
  setSelectedColor
}: TileControlsProps) {
  window.addEventListener(
    'keydown',
    (e) => {
      if (e.key === ' ') {
        setTool(Tool.HAND);
      } else if (e.key === 'z') {
        setTool(Tool.ZOOM);
      } else if (e.key === 'e') {
        setTool(Tool.EDIT);
      } else if (e.key === 't') {
        setTool(Tool.TOKEN);
      } else if (e.key === '1') {
        setSelectedColor(0);
      } else if (e.key === '2') {
        setSelectedColor(1);
      } else if (e.key === '3') {
        setSelectedColor(2);
      } else if (e.key === '4') {
        setSelectedColor(3);
      } else if (e.key === '5') {
        setSelectedColor(4);
      } else if (e.key === '6') {
        setSelectedColor(5);
      } else if (e.key === '7') {
        setSelectedColor(6);
      } else if (e.key === '8') {
        setSelectedColor(7);
      } else if (e.key === '9') {
        setSelectedColor(8);
      }
    },
    { passive: false }
  );

  function checkIfColorIsDark(color: string) {
    // If the color is dark, return white, otherwise return black
    const r = parseInt(color.slice(1, 3), 16);
    const g = parseInt(color.slice(3, 5), 16);
    const b = parseInt(color.slice(5, 7), 16);
    const brightness = (r * 299 + g * 587 + b * 114) / 1000;
    return brightness < 128 ? '#ffffff' : '#000000';
  }

  return (
    <Box
      style={{
        userSelect: 'none',
        position: 'fixed',
        bottom: '2rem',
        left: '2rem'
      }}
    >
      {tool === Tool.EDIT && (
        <ActionIcon.Group orientation='vertical' style={{ paddingBottom: '0.3rem', paddingLeft: '3.5rem' }}>
          <ActionIcon
            variant={editTool == EditTool.SQUARE ? 'filled' : 'default'}
            onClick={() => setEditTool(EditTool.SQUARE)}
          >
            <FaSquare />
          </ActionIcon>
          <ActionIcon
            variant={editTool == EditTool.CIRCLE ? 'filled' : 'default'}
            onClick={() => setEditTool(EditTool.CIRCLE)}
          >
            <FaCircle />
          </ActionIcon>
        </ActionIcon.Group>
      )}
      <ActionIcon.Group style={{ paddingBottom: '0.3rem' }}>
        <ActionIcon variant={tool == Tool.HAND ? 'filled' : 'default'} onClick={() => setTool(Tool.HAND)}>
          <FaHandPaper />
        </ActionIcon>
        <ActionIcon variant={tool == Tool.ZOOM ? 'filled' : 'default'} onClick={() => setTool(Tool.ZOOM)}>
          <FaMagnifyingGlass />
        </ActionIcon>
        <ActionIcon variant={tool == Tool.EDIT ? 'filled' : 'default'} onClick={() => setTool(Tool.EDIT)}>
          <FaPencil />
        </ActionIcon>
        <ActionIcon variant={tool == Tool.TOKEN ? 'filled' : 'default'} onClick={() => setTool(Tool.TOKEN)}>
          <FaRegCircle />
        </ActionIcon>
      </ActionIcon.Group>
      <ActionIcon.Group>
        {colors.map((color, index) => (
          <Menu key={`color-${index}`} trigger='hover' openDelay={700} closeDelay={100}>
            <Menu.Target>
              <ActionIcon
                key={`color-${index}`}
                variant={'filled'}
                color={color}
                onClick={() => setSelectedColor(index)}
              >
                <span
                  style={{
                    color: checkIfColorIsDark(color),
                    fontWeight: index == selectedColor ? 'bolder' : 'normal',
                    textDecoration: index == selectedColor ? 'underline' : 'none'
                  }}
                >
                  {index + 1}
                </span>
              </ActionIcon>
            </Menu.Target>
            <Menu.Dropdown>
              <ColorPicker
                value={colors[index]}
                onChange={(v) => {
                  const newColors = [...colors];
                  newColors[index] = v;
                  setColors(newColors);
                }}
              />
            </Menu.Dropdown>
          </Menu>
        ))}
      </ActionIcon.Group>
    </Box>
  );
}
