import styled from '@emotion/styled';
import { Meta, StoryObj } from '@storybook/react';
import { useState } from 'react';

import StylesCard from './StylesCard';

const meta: Meta<typeof StylesCard> = {
  title: 'Create/StylesCard',
  component: StylesCard,
  parameters: {
    layout: 'padded',
  },
};
export default meta;

const Wrapper = styled.div`
  position: relative;
  margin: 0 auto;
  width: 400px;
  height: 100%;
`;

type Story = StoryObj<typeof StylesCard>;

function StylesCardDemo() {
  const [styles, setStyles] = useState('Hip-hop, R&B, upbeat');
  const [expanded, setExpanded] = useState(true);
  const [stylesInputHeight, setStylesInputHeight] = useState(120);
  const [suggestedStylesLoading, setSuggestedStylesLoading] = useState(false);
  const [isUpsamplingStyles, setIsUpsamplingStyles] = useState(false);
  const [suggestedStyles, setSuggestedStyles] = useState([
    'Jazz',
    'Rock',
    'Pop',
    'Classical',
    'Electronic',
    'Country',
    'Blues',
    'Reggae',
    'Soul',
    'Funk',
    'Disco',
    'Rap',
  ]);

  const handlePickSuggestedStyle = (style: string) => {
    setStyles((prev) => (prev ? `${prev}, ${style}` : style));
    setSuggestedStyles((prev) => prev.filter((s) => s !== style));
    setSuggestedStylesLoading(true);
    setTimeout(() => {
      setSuggestedStylesLoading(false);
    }, 1000);
  };

  return (
    <Wrapper>
      <StylesCard
        styles={styles}
        setStyles={setStyles}
        expanded={expanded}
        setExpanded={setExpanded}
        suggestedStyles={suggestedStyles}
        onPickSuggestedStyle={handlePickSuggestedStyle}
        stylesInputHeight={stylesInputHeight}
        setStylesInputHeight={setStylesInputHeight}
        suggestedStylesLoading={suggestedStylesLoading}
        onUpsampleStyles={() => {
          setIsUpsamplingStyles(true);
          setTimeout(() => {
            setIsUpsamplingStyles(false);
          }, 1000);
        }}
        canUpsampleStyles={true}
        isUpsamplingStyles={isUpsamplingStyles}
        canSavePrompt={true}
        onSavePrompt={() => {}}
        onUndoSetStyles={() => {}}
        canUndoSetStyles={true}
        setActiveModal={() => {}}
        hasSavedPrompts={false}
        model='v45'
      />
    </Wrapper>
  );
}

export const Default: Story = {
  render: () => <StylesCardDemo />,
};