import styled from '@emotion/styled';
import { useCallback } from 'react';

import { useContextSelector } from '@/hooks/useContextSelector';

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

const InputContainer = styled.div`
  display: flex;
  flex-direction: column;
  gap: ${bigSpace}px;
`;

const StyledInput = styled.input`
  width: 100%;
  border-radius: 16px;
  padding: 16px;
  background: var(--color-background-secondary);
  color: var(--color-foreground-primary);
  font-size: 14px;

  &:focus {
    outline: none;
    border-color: var(--color-accent-primary);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  &::placeholder {
    color: var(--color-foreground-inactive);
  }
`;

export function StudioStemInputCard() {
  const [stemConditionControlTags, setStemConditionControlTags] =
    useContextSelector(StudioCreateContext, ({ create }) =>
      create.selectState<string | null>([
        CreateModes.STUDIO_STEM,
        'stemConditionControlTags',
      ])
    );

  const [, setStemGroup] = useContextSelector(
    StudioCreateContext,
    ({ create }) => create.selectState([CreateModes.STUDIO_STEM, 'stemGroup'])
  );

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

  const handleInputChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      const value = e.target.value;
      setStemConditionControlTags(value);

      // Clear stem group selection when custom input is entered
      if (value.trim()) {
        setStemGroup('');
      }
    },
    [setStemConditionControlTags, setStemGroup]
  );

  return (
    <CreateCard disabled={isGenerating}>
      <InputContainer>
        <StyledInput
          maxLength={32}
          placeholder='Basic instrument type (e.g., piano, guitar, drums)'
          value={stemConditionControlTags ?? ''}
          onChange={handleInputChange}
          disabled={isGenerating}
        />
      </InputContainer>
    </CreateCard>
  );
}