import styled from '@emotion/styled';
import { FC, SVGProps } from 'react';

import {
  FlashIcon,
  InstrumentBackupVocalsIcon,
  InstrumentBassGuitarIcon,
  InstrumentBrassIcon,
  InstrumentDrumsIcon,
  InstrumentFxIcon,
  InstrumentGuitarIcon,
  InstrumentLeadVocalsIcon,
  InstrumentPercussionIcon,
  InstrumentPianoIcon,
  InstrumentStringsIcon,
  InstrumentSynthIcon,
  InstrumentWoodwindIcon,
  MusicIcon,
  MusicNoteIcon,
  SkullIcon,
  SmileIcon,
  StarIcon,
  StemsIcon,
  VinylIcon,
} from '@/icons';

import Button, { ButtonShape, ButtonVariant } from '../button/Button';
import { ContextMenuTrigger } from '../contextMenu/ContextMenu';
import { StemGroupId } from '../edit2025/StemsContext';
import { Tooltip } from '../tooltip/Tooltip';

const Grid = styled.div`
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background-color: var(--color-background-secondary);
  padding: 4px;
`;

export const trackIcons: Record<
  keyof typeof StemGroupId,
  FC<SVGProps<SVGSVGElement>>
> & {
  Audio: FC<SVGProps<SVGSVGElement>>;
  Music: FC<SVGProps<SVGSVGElement>>;
  Double_Music: FC<SVGProps<SVGSVGElement>>;
  Noggin: FC<SVGProps<SVGSVGElement>>;
  Mirth: FC<SVGProps<SVGSVGElement>>;
  Stun: FC<SVGProps<SVGSVGElement>>;
  Twinkle: FC<SVGProps<SVGSVGElement>>;
  Wicka_Wicka: FC<SVGProps<SVGSVGElement>>;
} = {
  Audio: StemsIcon,
  Synth: InstrumentSynthIcon,
  Brass: InstrumentBrassIcon,
  FX: InstrumentFxIcon,

  Backing_Vocals: InstrumentBackupVocalsIcon,
  Strings: InstrumentStringsIcon,
  Bass: InstrumentBassGuitarIcon,
  Drums: InstrumentDrumsIcon,

  Woodwinds: InstrumentWoodwindIcon,
  Percussion: InstrumentPercussionIcon,
  Keyboard: InstrumentPianoIcon,
  Guitar: InstrumentGuitarIcon,

  Vocals: InstrumentLeadVocalsIcon,
  Music: MusicNoteIcon,
  Double_Music: MusicIcon,
  Noggin: SkullIcon,

  Mirth: SmileIcon,
  Stun: FlashIcon,
  Twinkle: StarIcon,
  Wicka_Wicka: VinylIcon,
};

export const defaultIconKey: keyof typeof trackIcons = 'Audio';

export const IconPickerContents = ({
  icon,
  setIcon,
  onClose,
}: {
  icon: keyof typeof trackIcons;
  setIcon: (icon: keyof typeof trackIcons) => void;
  onClose: () => void;
}) => {
  return (
    <Grid>
      {Object.entries(trackIcons).map(([option, Icon]) => (
        <Tooltip
          label={option.replaceAll('_', ' ')}
          openDelay={500}
          key={option}
        >
          <Button
            key={option}
            onClick={() => {
              setIcon(option as keyof typeof trackIcons);
              onClose();
            }}
            shape={ButtonShape.Pill}
            className={`border-2 p-2 ${option === icon ? 'border-white' : 'border-transparent'} hover:bg-white/25`}
            icon={<Icon className='h-4 w-4' />}
          />
        </Tooltip>
      ))}
    </Grid>
  );
};

export default function IconPicker({
  icon = defaultIconKey,
  setIcon,
}: {
  icon?: keyof typeof trackIcons;
  setIcon: (icon: keyof typeof trackIcons) => void;
}) {
  return (
    <ContextMenuTrigger
      placement='bottom-left'
      ButtonComponent={(props) => (
        <Button
          {...props}
          shape={ButtonShape.Pill}
          variant={ButtonVariant.Tertiary}
          className='p-2.5'
          icon={() => {
            const Component = trackIcons[icon] ?? trackIcons[defaultIconKey];
            return <Component className='h-4 w-4' />;
          }}
        />
      )}
      ContentsComponent={({ onClose }) => (
        <IconPickerContents icon={icon} setIcon={setIcon} onClose={onClose} />
      )}
    />
  );
}