import { Meta, StoryObj } from "@storybook/react"
import React, { useState } from "react"
import { TestGridContainer } from "../../../tests/TestGridContainer"
import { Checkbox, CheckboxProps } from "./Checkbox"

type Story = StoryObj<typeof Checkbox>

const meta: Meta<typeof Checkbox> = {
  title: "Design System/Checkbox",
  component: Checkbox,
}

export default meta

const Template = (args: CheckboxProps) => {
  const [checked, setIsChecked] = useState(args.checked)

  return <Checkbox {...args} checked={checked} onCheckedChange={setIsChecked} />
}

export const Default: Story = {
  render: Template,
}

export const Checked: Story = {
  render: Template,
  args: {
    checked: true,
  },
}

export const Indeterminate: Story = {
  render: Template,
  args: {
    checked: "indeterminate",
  },
}

export const Disabled: Story = {
  render: Template,
  args: {
    disabled: true,
  },
}

export const CheckedDisabled: Story = {
  render: Template,
  args: {
    checked: true,
    disabled: true,
  },
}

export const IndeterminateDisabled: Story = {
  render: Template,
  args: {
    checked: "indeterminate",
    disabled: true,
  },
}

export const AllVariants: Story = {
  render: function Render() {
    return (
      <TestGridContainer>
        <Checkbox {...Default.args} />
        <Checkbox {...Checked.args} />
        <Checkbox {...Indeterminate.args} />
        <Checkbox {...Disabled.args} />
        <Checkbox {...CheckedDisabled.args} />
        <Checkbox {...IndeterminateDisabled.args} />
      </TestGridContainer>
    )
  },
}