import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Checkbox } from './Checkbox';
import { Typography } from '../Typography';
import Box from '@mui/material/Box';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormGroup from '@mui/material/FormGroup';

const meta: Meta<typeof Checkbox> = {
  title: 'Atoms/Checkbox',
  component: Checkbox,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    checked: {
      control: 'boolean',
      description: 'Whether the checkbox is checked',
    },
    disabled: {
      control: 'boolean',
      description: 'Disable the checkbox',
      table: { defaultValue: { summary: 'false' } },
    },
  },
};

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

// ─── Default ────────────────────────────────────────────────────────────────

/** Default checkbox — unchecked */
export const Default: Story = {
  args: {},
};

// ─── States ─────────────────────────────────────────────────────────────────

/** All visual states */
export const States: Story = {
  render: () => (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
      <FormControlLabel control={<Checkbox />} label="Unchecked" />
      <FormControlLabel control={<Checkbox defaultChecked />} label="Checked" />
      <FormControlLabel control={<Checkbox disabled />} label="Disabled unchecked" />
      <FormControlLabel control={<Checkbox disabled defaultChecked />} label="Disabled checked" />
      <FormControlLabel control={<Checkbox indeterminate />} label="Indeterminate" />
    </Box>
  ),
};

// ─── Terms Agreement ────────────────────────────────────────────────────────

/**
 * Realistic pattern — terms and conditions checkbox in a payment form.
 */
export const TermsAgreement: Story = {
  name: 'Terms Agreement',
  render: () => {
    const TermsDemo = () => {
      const [accepted, setAccepted] = useState(false);

      return (
        <Box sx={{ maxWidth: 420 }}>
          <FormControlLabel
            control={
              <Checkbox checked={accepted} onChange={(e) => setAccepted(e.target.checked)} />
            }
            label={
              <Typography variant="body2">
                I agree to the service agreement and privacy policy
              </Typography>
            }
            sx={{ alignItems: 'flex-start', '& .MuiCheckbox-root': { pt: 0.5 } }}
          />
          {!accepted && (
            <Typography
              variant="body2"
              sx={{ ml: 4, mt: 0.5, color: 'var(--fa-color-text-brand)' }}
            >
              You must accept the terms to continue
            </Typography>
          )}
        </Box>
      );
    };

    return <TermsDemo />;
  },
};

// ─── Checklist ──────────────────────────────────────────────────────────────

/**
 * Checklist pattern — multiple independent options.
 */
export const Checklist: Story = {
  render: () => {
    const ChecklistDemo = () => {
      const [items, setItems] = useState({
        dressing: true,
        viewing: false,
        prayers: false,
        announcement: true,
      });

      const toggle = (key: keyof typeof items) => {
        setItems((prev) => ({ ...prev, [key]: !prev[key] }));
      };

      return (
        <Box sx={{ maxWidth: 420 }}>
          <Typography variant="h5" sx={{ mb: 2 }}>
            Complimentary inclusions
          </Typography>
          <FormGroup>
            <FormControlLabel
              control={<Checkbox checked={items.dressing} onChange={() => toggle('dressing')} />}
              label="Dressing and preparation"
            />
            <FormControlLabel
              control={<Checkbox checked={items.viewing} onChange={() => toggle('viewing')} />}
              label="Viewing for family and friends"
            />
            <FormControlLabel
              control={<Checkbox checked={items.prayers} onChange={() => toggle('prayers')} />}
              label="Prayers or vigil"
            />
            <FormControlLabel
              control={
                <Checkbox checked={items.announcement} onChange={() => toggle('announcement')} />
              }
              label="Funeral announcement"
            />
          </FormGroup>
        </Box>
      );
    };

    return <ChecklistDemo />;
  },
};
