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

import { LyricsInputModes, VocalGenders } from '../../v2/types';
import AdvancedOptionsCard from './AdvancedOptionsCard';

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

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

type Story = StoryObj<typeof AdvancedOptionsCard>;

function AdvancedOptionsCardDemo() {
  const [expanded, setExpanded] = useState(false);
  const [excludeStyles, setExcludeStyles] = useState('');
  const [weirdness, setWeirdness] = useState(50);
  const [styleInfluence, setStyleInfluence] = useState(70);
  const [audioInfluence, setAudioInfluence] = useState(30);
  const [vocalGender, setVocalGender] = useState(VocalGenders.UNSPECIFIED);

  return (
    <Wrapper>
      <AdvancedOptionsCard
        lyricsMode={LyricsInputModes.MANUAL}
        setLyricsMode={noop}
        showLyricsMode={false}
        expanded={expanded}
        setExpanded={setExpanded}
        excludeStyles={excludeStyles}
        setExcludeStyles={setExcludeStyles}
        weirdness={weirdness}
        setWeirdness={setWeirdness}
        styleInfluence={styleInfluence}
        setStyleInfluence={setStyleInfluence}
        audioInfluence={audioInfluence}
        setAudioInfluence={setAudioInfluence}
        vocalGender={vocalGender}
        setVocalGender={setVocalGender}
        model='v3.5'
      />
    </Wrapper>
  );
}

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