import { Meta, StoryObj } from "@storybook/react"
import React, { useState } from "react"
import { TestGridContainer } from "../../../tests/TestGridContainer"
import { Visibility } from "../../icons"
import { SwitchPill, SwitchPillProps } from "./SwitchPill"

type Story = StoryObj<typeof SwitchPill>

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

export default meta

const Template = (args: SwitchPillProps) => {
  const [isOpen, setIsOpen] = useState(args.checked)
  return (
    <SwitchPill {...args} checked={isOpen} onClick={() => setIsOpen(!isOpen)} />
  )
}

export const Default: Story = {
  render: Template,
  args: {
    children: "On auction",
  },
}

export const Selected: Story = {
  render: Template,
  args: {
    children: "On auction",
    checked: true,
  },
}

export const WithIcon: Story = {
  render: Template,
  args: {
    children: (
      <>
        <Visibility />
        Listed
      </>
    ),
  },
}

export const Medium: Story = {
  render: Template,
  args: {
    children: "Medium",
    size: "md",
  },
}

export const Large: Story = {
  render: Template,
  args: {
    children: "Large",
    size: "lg",
  },
}

export const Transparent: Story = {
  render: Template,
  args: {
    children: "Transparent",
    variant: "transparent",
  },
}

export const AllVariants: Story = {
  render: function Render() {
    return (
      <TestGridContainer>
        <Template {...Default.args} />
        <Template {...Selected.args} />
        <Template {...WithIcon.args} />
        <Template {...Medium.args} />
        <Template {...Large.args} />
      </TestGridContainer>
    )
  },
}