import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';
import { Dropdown } from './Dropdown';
import { Form } from './Form';
import { InputField } from './InputField';

const meta = {
  title: 'Components/Form',
  component: Form,
  tags: ['autodocs'],
  parameters: {
    docs: {
      description: {
        component: 'Surface container with a title bar and a responsive content grid, intended for CMS forms.'
      }
    }
  },
  argTypes: {
    title: {
      description: 'Form title displayed in the header bar.',
      control: 'text',
      table: { type: { summary: 'string' } }
    },
    titleBarRight: {
      description: 'Optional node rendered on the right side of the title bar.',
      control: false,
      table: { type: { summary: 'ReactNode' } }
    },
    children: {
      description: 'Form content rendered inside the responsive grid.',
      control: false,
      table: { type: { summary: 'ReactNode' } }
    },
    className: {
      description: 'Extra CSS classes for the root container.',
      control: 'text',
      table: { type: { summary: 'string' } }
    }
  },
  args: {
    title: 'Post details'
  }
} satisfies Meta<typeof Form>;

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

export const Basic: Story = {
  args: {
    children: (
      <>
        <InputField label="Title" type="text" value="A short post title" />
        <Dropdown
          label="Status"
          value="draft"
          choices={[
            { id: 'draft', label: 'Draft' },
            { id: 'published', label: 'Published' }
          ]}
        />
        <InputField label="Slug" type="text" value="a-short-post-title" />
      </>
    )
  }
};

export const WithActions: Story = {
  render: (args) => {
    const [title, setTitle] = useState('Storybook powered CMS');
    const [status, setStatus] = useState('draft');

    return (
      <Form
        {...args}
        titleBarRight={<Button type="solid" size="sm" label="Save" />}
      >
        <div className="col-span-2">
          <InputField
            label="Title"
            type="text"
            value={title}
            onChange={(event) => setTitle(event.target.value)}
            size="full"
          />
        </div>
        <Dropdown
          label="Status"
          value={status}
          onChange={setStatus}
          choices={[
            { id: 'draft', label: 'Draft' },
            { id: 'review', label: 'In review' },
            { id: 'published', label: 'Published' }
          ]}
        />
        <InputField label="Slug" type="text" value="storybook-powered-cms" />
      </Form>
    );
  }
};