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

type Story = StoryObj<typeof Switch>

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

export default meta

const Template = (args: SwitchProps) => {
  const [checked, setChecked] = useState(args.checked)
  return <Switch {...args} checked={checked} onCheckedChange={setChecked} />
}

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

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

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

export const Small: Story = {
  render: Template,
  args: {
    size: "sm",
  },
}

export const SmallChecked: Story = {
  render: Template,
  args: {
    size: "sm",
    checked: true,
  },
}

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

export const AllVariants: Story = {
  render: function Render() {
    return (
      <TestGridContainer>
        <Switch {...Default.args} />
        <Switch {...Checked.args} />
        <Switch {...Disabled.args} />
        <Switch {...DisabledChecked.args} />
        <Switch {...Small.args} />
        <Switch {...SmallChecked.args} />
      </TestGridContainer>
    )
  },
}