import styled from '@emotion/styled';

import Button, { ButtonShape, ButtonVariant } from '@/components/button/Button';
import { useContextSelector } from '@/hooks/useContextSelector';

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

const ButtonWrapper = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
`;

export function StudioStemSelectionConditionMode() {
  const [selectionConditionMode, setSelectionConditionMode] =
    useContextSelector(StudioCreateContext, ({ create }) =>
      create.selectState([CreateModes.STUDIO_STEM, 'selectionConditionMode'])
    );

  const isGenerating = useContextSelector(
    StudioCreateContext,
    ({ create }) => create.isGenerating
  );

  return (
    <CreateCard disabled={isGenerating} title='Selection Condition Mode'>
      <ButtonWrapper>
        <Button
          shape={ButtonShape.Rectangle}
          variant={
            selectionConditionMode === 'cover'
              ? ButtonVariant.Primary
              : ButtonVariant.Tertiary
          }
          onClick={() => setSelectionConditionMode('cover')}
        >
          Cover
        </Button>
        <Button
          shape={ButtonShape.Rectangle}
          variant={
            selectionConditionMode === 'persona'
              ? ButtonVariant.Primary
              : ButtonVariant.Tertiary
          }
          onClick={() => setSelectionConditionMode('persona')}
        >
          Persona
        </Button>
        <Button
          shape={ButtonShape.Rectangle}
          variant={
            selectionConditionMode === null
              ? ButtonVariant.Primary
              : ButtonVariant.Tertiary
          }
          onClick={() => setSelectionConditionMode(null)}
        >
          None
        </Button>
      </ButtonWrapper>
    </CreateCard>
  );
}