import { useState } from "react";
import { Checkbox } from "./index";

import { DocsPage } from "@shared/stories/DocsTemplate";
import type { Meta, StoryObj } from "@storybook/react";

const meta: Meta<typeof Checkbox> = {
  title: "Components/Checkbox",
  component: Checkbox,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    docs: {
      page: DocsPage,
      description: {
        component:
          "A checkbox component with support for checked/unchecked states, labels, error states, and info icons.",
      },
    },
  },
  argTypes: {
    checked: {
      control: { type: "boolean" },
      description: "Whether the checkbox is checked",
    },
    disabled: {
      control: { type: "boolean" },
      description: "Disable the checkbox",
    },
    label: {
      control: { type: "text" },
      description: "Label text for the checkbox",
    },
    error: {
      control: { type: "boolean" },
      description: "Show error state",
    },
    required: {
      control: { type: "boolean" },
      description: "Mark checkbox as required",
    },
    state: {
      control: { type: "select" },
      options: ["default", "focus", "disabled"],
      description: "Visual state of the checkbox",
    },
  },
  args: {
    checked: false,
    disabled: false,
    label: "Checkbox Label",
    error: false,
    required: false,
  },
};

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

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

// Checked checkbox
export const Checked: Story = {
  args: {
    checked: true,
    label: "Checked Checkbox",
  },
};

// Unchecked checkbox
export const Unchecked: Story = {
  args: {
    checked: false,
    label: "Unchecked Checkbox",
  },
};

// With label
export const WithLabel: Story = {
  args: {
    checked: false,
    label: "I agree to the terms and conditions",
  },
};

// Disabled checkbox
export const Disabled: Story = {
  args: {
    checked: false,
    label: "Disabled Checkbox",
    disabled: true,
  },
};

// Disabled checked
export const DisabledChecked: Story = {
  args: {
    checked: true,
    label: "Disabled Checked Checkbox",
    disabled: true,
  },
};

// Error state
export const Error: Story = {
  args: {
    checked: false,
    label: "Checkbox with Error",
    error: true,
  },
};

// Required checkbox
export const Required: Story = {
  args: {
    checked: false,
    label: "Required Field",
    required: true,
  },
};

// Focus state
export const Focus: Story = {
  args: {
    checked: false,
    label: "Focused Checkbox",
    state: "focus",
  },
};

// With info icon
export const WithInfoIcon: Story = {
  args: {
    checked: false,
    label: "Checkbox with Info",
    renderInfoIcon: {
      onClick: () => alert("Info clicked"),
      dataTestId: "info-icon",
    },
  },
};

// Interactive checkbox
export const Interactive: Story = {
  render: () => {
    const [checked, setChecked] = useState(false);
    return (
      <Checkbox
        checked={checked}
        onChange={isChecked => setChecked(isChecked)}
        label="Click to toggle"
      />
    );
  },
  parameters: {
    docs: {
      description: {
        story: "Interactive checkbox that can be toggled by clicking.",
      },
    },
  },
};

// Multiple checkboxes
export const Multiple: Story = {
  render: () => {
    const [items, setItems] = useState([
      { id: 1, label: "Option 1", checked: false },
      { id: 2, label: "Option 2", checked: true },
      { id: 3, label: "Option 3", checked: false },
    ]);

    const handleChange = (id: number, isChecked: boolean) => {
      setItems(
        items.map(item =>
          item.id === id ? { ...item, checked: isChecked } : item
        )
      );
    };

    return (
      <div className="space-y-3">
        {items.map(item => (
          <Checkbox
            key={item.id}
            checked={item.checked}
            onChange={isChecked => handleChange(item.id, isChecked)}
            label={item.label}
          />
        ))}
      </div>
    );
  },
  parameters: {
    docs: {
      description: {
        story: "Multiple checkboxes in a group.",
      },
    },
  },
};

// All variants showcase
export const AllVariants: Story = {
  render: () => (
    <div className="space-y-6">
      <div>
        <h3 className="mb-3 text-lg font-semibold">States</h3>
        <div className="space-y-3">
          <Checkbox checked={false} label="Unchecked" />
          <Checkbox checked={true} label="Checked" />
          <Checkbox checked={false} label="Disabled" disabled />
          <Checkbox checked={true} label="Disabled Checked" disabled />
        </div>
      </div>
      <div>
        <h3 className="mb-3 text-lg font-semibold">With Error</h3>
        <Checkbox checked={false} label="Error State" error />
      </div>
      <div>
        <h3 className="mb-3 text-lg font-semibold">Required</h3>
        <Checkbox checked={false} label="Required Field" required />
      </div>
      <div>
        <h3 className="mb-3 text-lg font-semibold">With Info Icon</h3>
        <Checkbox
          checked={false}
          label="With Info Icon"
          renderInfoIcon={{
            onClick: () => {},
            dataTestId: "info",
          }}
        />
      </div>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story: "Showcase of all checkbox variants and states.",
      },
    },
  },
};