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

import { DocsTemplate } from '../../../.storybook'
import CheckboxComponent from './Checkbox'

const meta: Meta<typeof CheckboxComponent> = {
  title: 'Components/FormComponents/Checkbox',
  component: CheckboxComponent,
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-336&t=KUWdug3XS3dQ8hnl-0',
    },
    docs: {
      page: () => (
        <DocsTemplate
          figmaLink='https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-336&t=KUWdug3XS3dQ8hnl-0'
          description={
            <span>
              The <code>Checkbox</code> component is a form element that allows
              users to select or deselect a single option from a set of choices.
              It consists of a small box that can be checked or unchecked,
              indicating the user's selection status. An optional label can be
              associated with the <code>Checkbox</code> to provide additional
              context or description for the option.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Utilize the <code>Checkbox</code> component in forms or settings
              sections where users need to make binary choices from a set of
              options.
            </span>,
            <span key='second-bullet'>
              Add a concise and descriptive label alongside the{' '}
              <code>Checkbox</code> to help users understand the purpose of the
              option.
            </span>,
            <span key='third-bullet'>
              A partial state can be used to indicate that some, but not all, of
              the options in a set are selected. This is most useful when the
              checkbox is part of a collection of checkboxes and some, but not
              all, of the subset options are selected.
            </span>,
          ]}
        />
      ),
    },
  },
}
export default meta

type Story = StoryObj<typeof CheckboxComponent>

const Checkbox = (args) => {
  const [checked, setChecked] = useState(args.checked)
  const [partialChecked, setPartialChecked] = useState(args.partialChecked)

  const inputHandler = (check, partial?: boolean) => {
    if (typeof partial === 'boolean') {
      setPartialChecked((prev) => !prev)
      setChecked(true)
    } else {
      setChecked(check)
      setPartialChecked(false)
    }
  }

  useEffect(() => {
    typeof args.checked === 'boolean' && inputHandler(args.checked)
  }, [args.checked])

  return (
    <CheckboxComponent
      {...args}
      checked={checked}
      {...(typeof partialChecked === 'boolean' && { partialChecked })}
      callout={(_, check, partial) => inputHandler(check, partial)}
    />
  )
}

const Template: Story = {
  render: (args) => {
    return <Checkbox {...args} />
  },
}

export const Standard: Story = {
  ...Template,
  args: {
    checked: false,
    label: 'Checkbox Label',
  },
}
export const Disabled: Story = {
  ...Template,
  args: {
    checked: true,
    label: 'Checkbox Label (disabled)',
    disabled: true,
  },
}
Disabled.storyName = 'Checked (disabled)'

export const Radio: Story = {
  ...Template,
  args: {
    checked: false,
    label: 'Radio Label',
    type: 'radio',
  },
}

export const NoLabel: Story = {
  ...Template,
  args: {
    checked: false,
    label: 'No Label',
    hideLabel: true,
  },
}

export const PartialState: Story = {
  ...Template,
  args: {
    partialChecked: true,
    label: 'Partial State',
  },
}

export const PartialStateDisabled: Story = {
  ...Template,
  args: {
    partialChecked: true,
    label: 'Partial State (disabled)',
    disabled: true,
  },
}
PartialStateDisabled.storyName = 'Partial State (disabled)'