import type { Meta, StoryObj } from '@storybook/react'
import { Checkbox } from '../Checkbox/Checkbox'
import { LabeledCheckbox } from '../Checkbox/LabeledCheckbox'
import { Input } from '../Input'
import { SimpleSelect } from '../Select'
import {
  FIELD_SIZE_OPTIONS,
  Field,
  FieldError,
  FieldHelper,
  FieldLabel,
  FieldControl,
} from './Field'

const meta: Meta<typeof Field> = {
  title: 'Form/Field',
  component: Field,
  argTypes: {
    size: {
      control: {
        type: 'select',
      },
      options: FIELD_SIZE_OPTIONS,
      table: {
        type: {
          summary: FIELD_SIZE_OPTIONS.map((value) => value).join(' | '),
        },
      },
    },
    children: {
      control: false,
    },
  },
  parameters: {
    layout: 'centered',
  },
}

export default meta
type Story = StoryObj<typeof meta>

export const WithLabel: Story = {
  render: (_args) => (
    <Field>
      <FieldLabel>Network</FieldLabel>
      <FieldControl>
        <SimpleSelect
          options={[
            { label: 'Ethereum', value: 'ethereum' },
            { label: 'Arbitrum', value: 'arbitrum' },
            { label: 'Base', value: 'base' },
          ]}
          placeholder="Select network..."
        />
      </FieldControl>
    </Field>
  ),
}

export const SmallWithLabel: Story = {
  render: (_args) => (
    <Field size="sm">
      <FieldLabel>Email address</FieldLabel>
      <FieldControl>
        <Input placeholder="you@example.com" />
      </FieldControl>
    </Field>
  ),
}

export const WithHelperAndLabel: Story = {
  render: (_args) => (
    <Field>
      <FieldLabel>Risk threshold</FieldLabel>
      <FieldHelper>
        Choose when the subscription should trigger an alert.
      </FieldHelper>
      <FieldControl>
        <SimpleSelect
          options={[
            { label: 'Low', value: 'low' },
            { label: 'Medium', value: 'medium' },
            { label: 'High', value: 'high' },
          ]}
          placeholder="Select threshold..."
        />
      </FieldControl>
    </Field>
  ),
  parameters: {
    docs: {
      description: {
        story:
          'Use helper text to explain why a field is needed or how the selected value is used.',
      },
    },
  },
}

export const WithErrorMessage: Story = {
  args: {
    children: [
      <FieldControl key="wem-control">
        <Input placeholder="Input here..." error={true} />
      </FieldControl>,
      <FieldError key="wem-error">This field has an error.</FieldError>,
    ],
  },
  parameters: {
    docs: {
      description: {
        story:
          'Use FieldError with FieldControl error state so assistive technology can associate the message with the control.',
      },
    },
  },
}

export const WithEverything: Story = {
  args: {
    children: [
      <FieldLabel key="we-label">Complete Field</FieldLabel>,
      <FieldHelper key="we-helper">This is some helpful text.</FieldHelper>,
      <FieldControl key="we-control">
        <Input placeholder="Enter all details" error={true} />
      </FieldControl>,
      <FieldError key="we-error">This field has an error.</FieldError>,
    ],
  },
}

export const WithCheckbox: Story = {
  args: {
    children: [
      <FieldLabel asChild key="wc-label">
        <span>I agree to the terms</span>
      </FieldLabel>,
      <FieldHelper key="wc-helper">
        You must agree to the terms to continue.
      </FieldHelper>,
      <FieldControl key="wc-control" error={true}>
        <Checkbox />
      </FieldControl>,
      <FieldError key="wc-error">This field is required.</FieldError>,
    ],
  },
}

export const WithLabeledCheckbox: Story = {
  render: (_args) => (
    <div className="flex flex-col gap-4">
      <LabeledCheckbox>Unchecked</LabeledCheckbox>
      <LabeledCheckbox checked>Checked</LabeledCheckbox>
      <LabeledCheckbox checked="indeterminate">Indeterminate</LabeledCheckbox>
      <LabeledCheckbox disabled>Disabled</LabeledCheckbox>
    </div>
  ),
}

export const WithEverythingSmall: Story = {
  args: {
    size: 'sm',
    children: [
      <FieldLabel key="wes-label">Complete Field (Small)</FieldLabel>,
      <FieldHelper key="wes-helper">This is some helpful text.</FieldHelper>,
      <FieldControl key="wes-control">
        <Input placeholder="Enter all details" error={true} />
      </FieldControl>,
      <FieldError key="wes-error">This field has an error.</FieldError>,
    ],
  },
}