import styled from '@emotion/styled';

import stemIconMap from '@/app/(root)/stems/stemIconMap';
import Button, {
  Props as ButtonProps,
  ButtonVariant,
} from '@/components/button/Button';
import { StemGroupId } from '@/components/edit2025/StemsContext';
import { useContextSelector } from '@/hooks/useContextSelector';

import { CreateModes } from '../../v2/types';
import StudioCreateContext from './StudioCreateContext';

const Wrapper = styled.div`
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 8px;
  row-gap: 8px;
  width: 100%;
`;

const StemGroupButton = (props: ButtonProps) => {
  return (
    <Button
      variant={props.active ? ButtonVariant.Primary : ButtonVariant.LightGlass}
      className='rounded-[16px] px-1 py-3 whitespace-nowrap'
      {...props}
    />
  );
};

export default function StemButtons({
  selectedStemGroup,
  setSelectedStemGroup,
}: {
  selectedStemGroup: keyof typeof StemGroupId;
  setSelectedStemGroup: (stemGroup: keyof typeof StemGroupId) => void;
}) {
  return (
    <Wrapper>
      {Object.keys(StemGroupId).map((stemGroup) => (
        <StemGroupButton
          key={stemGroup}
          onMouseDown={() =>
            setSelectedStemGroup(stemGroup as keyof typeof StemGroupId)
          }
          active={selectedStemGroup === stemGroup}
          icon={stemIconMap[stemGroup as keyof typeof stemIconMap]}
        >
          {stemGroup.replace('Backing_Vocals', 'Backing Vox')}
        </StemGroupButton>
      ))}
    </Wrapper>
  );
}

export const StudioStemButtons = () => {
  const [selectedStemGroup, setSelectedStemGroup] = useContextSelector(
    StudioCreateContext,
    ({ create }) =>
      create.selectState<keyof typeof StemGroupId>([
        CreateModes.STUDIO_STEM,
        'stemGroup',
      ])
  );
  const [, setStemConditionControlTags] = useContextSelector(
    StudioCreateContext,
    ({ create }) =>
      create.selectState<string | null>([
        CreateModes.STUDIO_STEM,
        'stemConditionControlTags',
      ])
  );

  const handleStemGroupSelection = (stemGroup: keyof typeof StemGroupId) => {
    setSelectedStemGroup(stemGroup);
    setStemConditionControlTags(null); // Clear custom input when stem button is clicked
  };

  return (
    <StemButtons
      selectedStemGroup={selectedStemGroup}
      setSelectedStemGroup={handleStemGroupSelection}
    />
  );
};