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

import { CreateModes, LyricsInputModes, VocalGenders } from '../../v2/types';
import AdvancedOptionsCard from './AdvancedOptionsCard';
import { Option } from './AnimatedTabs';
import CreateHeader, { ExternalModelTypeSchema } from './CreateHeader';
import LyricsCard from './LyricsCard';
import SongDescriptionCard from './SongDescriptionCard';
import StylesCard from './StylesCard';
import TitleWorkspaceCard from './TitleWorkspaceCard';
import { CardList, CardListContainer } from './common';

const meta: Meta = {
  title: 'Create/CreateForm',
  parameters: {
    layout: 'padded',
  },
};
export default meta;

const modeOptions: Option<CreateModes>[] = [
  { value: CreateModes.SIMPLE, label: 'Simple' },
  { value: CreateModes.CUSTOM, label: 'Custom' },
];

const modelTypeOptions: ExternalModelTypeSchema[] = [
  {
    id: '0',
    name: 'Bluejay',
    description: 'Bluejay release candidate',
    external_key: 'v46',
    major_version: 4,
    badges: ['beta'],
  },
  {
    id: '1',
    name: 'v4.5',
    description:
      'Smarter prompts, better genre mashups, faster generations, max 8 min',
    external_key: 'v45',
    major_version: 4,
    badges: ['pro'],
  },
  {
    id: '1.1',
    name: 'v4.0',
    description: 'Improved vocal quality, max 4 min',
    external_key: 'v4',
    major_version: 4,
    badges: ['pro'],
  },
  {
    id: '1.2',
    name: 'v3.5',
    description: 'Better song structure, max 4 min',
    external_key: 'v35',
    major_version: 3,
  },
  {
    id: '1.3',
    name: 'v3.0',
    description: 'Older, max 2 min',
    external_key: 'v3',
    major_version: 3,
  },
  {
    id: '1.4',
    name: 'v2',
    description: 'Vintage, max 1.3 min',
    external_key: 'v2',
    major_version: 2,
  },
];

const Page = styled.div`
  background-color: #161616;
  padding: 20px;
  height: calc(100vh - 36px);
`;

const Wrapper = styled.div`
  position: relative;
  margin: 0 auto;
  width: 400px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #09090a;
  height: 100%;
`;

type Story = StoryObj;

function CreateFormDemo() {
  const [songDescription, setSongDescription] = useState('');
  const [songDescriptionInputHeight, setSongDescriptionInputHeight] =
    useState(120);
  const [instrumental, setInstrumental] = useState(false);

  const [lyrics, setLyrics] = useState('');
  const [lyricsExpanded, setLyricsExpanded] = useState(true);
  const [lyricsInputHeight, setLyricsInputHeight] = useState(120);
  const [lyricsMode] = useState(LyricsInputModes.MANUAL);

  const [styles, setStyles] = useState('');
  const [stylesExpanded, setStylesExpanded] = useState(true);
  const [stylesInputHeight, setStylesInputHeight] = useState(120);
  const [suggestedStyles, setSuggestedStyles] = useState([
    'Jazz',
    'Rock',
    'Pop',
    'Classical',
    'Electronic',
    'Country',
    'Blues',
    'Reggae',
    'Soul',
    'Funk',
    'Disco',
    'Rap',
  ]);
  const [suggestedStylesLoading, setSuggestedStylesLoading] = useState(false);
  const [isUpsamplingStyles, setIsUpsamplingStyles] = useState(false);

  const [advancedOptionsExpanded, setAdvancedOptionsExpanded] = 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);

  const [mode, setMode] = useState(CreateModes.CUSTOM);
  const [modelType, setModelType] = useState(modelTypeOptions[0].external_key);
  const [title, setTitle] = useState('');

  return (
    <Page>
      <Wrapper>
        <CreateHeader
          creditsRemaining={5000}
          onClickCredits={() => alert('Credits clicked!')}
          creditsHref='#'
          modeOptions={modeOptions}
          mode={mode}
          setMode={setMode}
          modelTypeOptions={modelTypeOptions}
          modelType={modelType!}
          setModelType={setModelType}
        />
        <CardListContainer>
          <CardList active={mode === CreateModes.SIMPLE}>
            <SongDescriptionCard
              songDescription={songDescription}
              setSongDescription={setSongDescription}
              onAddLyrics={() => setMode(CreateModes.CUSTOM)}
              suggestedStyles={suggestedStyles}
              suggestedStylesLoading={suggestedStylesLoading}
              songDescriptionInputHeight={songDescriptionInputHeight}
              setSongDescriptionInputHeight={setSongDescriptionInputHeight}
              onPickSuggestedStyle={(style) => {
                setStyles((prev) => prev + style + ' ');
                setSuggestedStyles((prev) => prev.filter((s) => s !== style));
                setSuggestedStylesLoading(true);
              }}
              instrumental={instrumental}
              setInstrumental={setInstrumental}
              onUploadFile={() => {}}
              onClickRecordButton={() => {}}
            />
          </CardList>

          <CardList active={mode === CreateModes.CUSTOM}>
            <LyricsCard
              lyrics={lyrics}
              setLyrics={setLyrics}
              expanded={lyricsExpanded}
              setExpanded={setLyricsExpanded}
              lyricsInputHeight={lyricsInputHeight}
              setLyricsInputHeight={setLyricsInputHeight}
              mode={lyricsMode}
              onSavePrompt={() => {}}
              canSavePrompt={true}
              model={modelType}
            />

            <StylesCard
              styles={styles}
              setStyles={setStyles}
              expanded={stylesExpanded}
              setExpanded={setStylesExpanded}
              stylesInputHeight={stylesInputHeight}
              setStylesInputHeight={setStylesInputHeight}
              suggestedStyles={suggestedStyles}
              onPickSuggestedStyle={(style) => {
                setStyles((prev) => prev + style + ' ');
                setSuggestedStyles((prev) => prev.filter((s) => s !== style));
                setSuggestedStylesLoading(true);
                setTimeout(() => {
                  setSuggestedStylesLoading(false);
                }, 1000);
              }}
              suggestedStylesLoading={suggestedStylesLoading}
              onUpsampleStyles={() => {
                setIsUpsamplingStyles(true);
                setTimeout(() => {
                  setIsUpsamplingStyles(false);
                }, 1000);
              }}
              canUpsampleStyles={true}
              isUpsamplingStyles={isUpsamplingStyles}
              canSavePrompt={true}
              onSavePrompt={() => {}}
              onUndoSetStyles={() => {}}
              canUndoSetStyles={true}
              setActiveModal={() => {}}
              hasSavedPrompts={false}
              model={modelType}
            />

            <AdvancedOptionsCard
              lyricsMode={LyricsInputModes.MANUAL}
              setLyricsMode={noop}
              showLyricsMode={false}
              expanded={advancedOptionsExpanded}
              setExpanded={setAdvancedOptionsExpanded}
              excludeStyles={excludeStyles}
              setExcludeStyles={setExcludeStyles}
              weirdness={weirdness}
              setWeirdness={setWeirdness}
              styleInfluence={styleInfluence}
              setStyleInfluence={setStyleInfluence}
              audioInfluence={audioInfluence}
              setAudioInfluence={setAudioInfluence}
              vocalGender={vocalGender}
              setVocalGender={setVocalGender}
              model={modelType}
            />

            <TitleWorkspaceCard title={title} setTitle={setTitle} />
          </CardList>
        </CardListContainer>
      </Wrapper>
    </Page>
  );
}

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