import styled from '@emotion/styled';
import { useContext, useEffect, useState } from 'react';

import useClip from '@/hooks/useClip';
import { MAX_TAG_LENGTH } from '@/utils/constants';

import EditStylesContext from './EditStylesContext';
import { GlassModule, GlassModuleBody, GlassModuleHeader } from './components';

const EditTextarea = styled.textarea`
  font-family: inherit;
  font-size: 18px;
  background-color: transparent;
  resize: none;
  height: 100%;
  &:focus {
    outline: none;
  }
`;

export default function EditStyles({ clipId }: { clipId: string }) {
  const { styles, setStyles, negativeStyles, setNegativeStyles } =
    useContext(EditStylesContext);
  const [showExcludeStyles, setShowExcludeStyles] = useState(!!negativeStyles);

  const { clip } = useClip(clipId);
  useEffect(() => {
    setStyles(clip?.metadata?.tags || '');
    setNegativeStyles(clip?.metadata?.negative_tags || '');
    if (clip?.metadata?.negative_tags) {
      setShowExcludeStyles(true);
    }
  }, [clip?.metadata?.tags, clip?.metadata?.negative_tags]);

  return (
    <GlassModule>
      <GlassModuleHeader>Styles</GlassModuleHeader>
      <GlassModuleBody>
        <EditTextarea
          placeholder='Describe the intended style for generated clips.'
          value={styles}
          onChange={(e) => setStyles(e.currentTarget.value)}
          maxLength={MAX_TAG_LENGTH}
        />
      </GlassModuleBody>

      <GlassModuleHeader
        onClick={() => setShowExcludeStyles(!showExcludeStyles)}
      >
        Exclude Styles
      </GlassModuleHeader>
      <GlassModuleBody>
        <EditTextarea
          placeholder='Describe styles to avoid for generated clips.'
          value={negativeStyles}
          onChange={(e) => setNegativeStyles(e.currentTarget.value)}
          maxLength={MAX_TAG_LENGTH}
        />
      </GlassModuleBody>
    </GlassModule>
  );
}