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

import { LyricsInputModes } from '../../v2/types';
import LyricsCard from './LyricsCard';

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

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

type Story = StoryObj<typeof LyricsCard>;

function LyricsCardDemo() {
  const [lyrics, setLyrics] = useState('Do re mi fa sol la ti do');
  const [expanded, setExpanded] = useState(true);
  const [lyricsInputHeight, setLyricsInputHeight] = useState(120);

  return (
    <Wrapper>
      <LyricsCard
        lyrics={lyrics}
        setLyrics={setLyrics}
        expanded={expanded}
        setExpanded={setExpanded}
        lyricsInputHeight={lyricsInputHeight}
        setLyricsInputHeight={setLyricsInputHeight}
        mode={LyricsInputModes.MANUAL}
        onSavePrompt={() => {}}
        canSavePrompt={true}
      />
    </Wrapper>
  );
}

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