import React, { useState } from 'react'
import { type Meta, type StoryObj } from '@storybook/react-vite'

import { DocsTemplate } from '../../../.storybook'
import TableCheckbox from './TableCheckbox'

const meta: Meta<typeof TableCheckbox> = {
  title: 'Components/Tables/Components/TableCheckbox',
  component: TableCheckbox,
  parameters: {
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              This checkbox component utilizes the standard{' '}
              <code>Checkbox</code> component, but has a <code>Cell</code>{' '}
              wrapper around it with a style of <code>width: 18px</code>.
            </span>
          }
          infoBullets={[
            <span key='first'>
              This should only be used when utilizing the{' '}
              <code>CustomTable</code>
            </span>,
          ]}
        />
      ),
    },
  },
}

export default meta

type Story = StoryObj<typeof TableCheckbox>

const Template: Story = {
  render: function Render(args) {
    const { checked } = args
    const [checkedState, setCheckedState] = useState(checked)

    const checkHandler = () => {
      setCheckedState(!checkedState)
    }

    return (
      <TableCheckbox
        {...args}
        checked={checkedState}
        handleCheck={checkHandler}
      />
    )
  },
}

export const Basic: Story = {
  ...Template,
  args: {
    name: 'table_checkbox',
    checked: false,
  },
}