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

import Button from '@/components/button/Button';

import { ModelLaunchModal } from './ModelLaunchModal';
import type { ModelLaunchModalProps } from './ModelLaunchModal';

const meta: Meta<typeof ModelLaunchModal> = {
  title: 'Components/Modal/ModelLaunchModal',
  component: ModelLaunchModal,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    open: { control: 'boolean' },
    onOpenChange: { action: 'onOpenChange' },
    onUpgrade: { action: 'onUpgrade' },
  },
};

export default meta;
type Story = StoryObj<typeof meta>;

const DefaultComponent = (args: Partial<ModelLaunchModalProps>) => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Model Launch Modal</Button>
      <ModelLaunchModal
        backgroundImageUrl='https://cdn-o.suno.com/v5_ModalBackground.png'
        badgeText='New Model'
        title={"The world's best\nmusic model"}
        description={
          "Superior sound, intuitive control, and\nstudio-quality results. It's the powerful\nfoundation for everything that's coming."
        }
        {...args}
        open={open}
        onOpenChange={setOpen}
        onUpgrade={() => {
          console.log('Upgrade clicked');
          setOpen(false);
        }}
      />
    </>
  );
};

export const Default: Story = {
  render: DefaultComponent,
  args: {
    open: false,
  },
};

const AlwaysOpenComponent = (args: Partial<ModelLaunchModalProps>) => {
  const [open, setOpen] = useState(true);

  return (
    <ModelLaunchModal
      backgroundImageUrl='https://cdn-o.suno.com/v5_ModalBackground.png'
      badgeText='New Model'
      title={"The world's best\nmusic model"}
      description={
        "Superior sound, intuitive control, and\nstudio-quality results. It's the powerful\nfoundation for everything that's coming."
      }
      {...args}
      open={open}
      onOpenChange={setOpen}
      onUpgrade={() => {
        console.log('Upgrade clicked');
      }}
    />
  );
};

export const AlwaysOpen: Story = {
  render: AlwaysOpenComponent,
  args: {},
};