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

import { CreateModes } from '../../v2/types';
import { Option } from './AnimatedTabs';
import CreateHeader, { ExternalModelTypeSchema } from './CreateHeader';

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 meta: Meta<typeof CreateHeader> = {
  title: 'Components/CreateHeader',
  component: CreateHeader,
};
export default meta;

type Story = StoryObj<typeof CreateHeader>;

function CreateHeaderDemo() {
  const [mode, setActiveMode] = useState(CreateModes.SIMPLE);
  const [modelType, setModelType] = useState(modelTypeOptions[0].external_key);
  return (
    <div style={{ background: '#181414', padding: 32 }}>
      <div style={{ background: '#09090a' }}>
        <CreateHeader
          creditsRemaining={5000}
          onClickCredits={() => alert('Credits clicked!')}
          creditsHref='#'
          modeOptions={modeOptions}
          mode={mode}
          setMode={(option) => setActiveMode(option)}
          modelTypeOptions={modelTypeOptions}
          modelType={modelType}
          setModelType={setModelType}
        />
      </div>
    </div>
  );
}

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