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

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

export default {
  title: 'Components/Switch/With Label',
  component: Switch,
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-347&p=f&t=v3aRLCcxAtwvrbEe-0',
    },
    docs: {
      page: () => (
        <DocsTemplate
          figmaLink='https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-347&p=f&t=v3aRLCcxAtwvrbEe-0'
          description={
            <span>
              The <code>Switch</code> component is a user interface element that
              allows users to switch between two states, typically representing
              an "on" and "off" state. It returns a boolean value, either{' '}
              <code>true</code> or <code>false</code>, indicating the current
              state of the switch. It is commonly used in forms and settings
              panels to enable users to turn specific features or options on or
              off.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Include the <code>Switch</code> component within forms or settings
              sections where users need to make binary choices or enable/disable
              specific functionalities.
            </span>,
          ]}
        />
      ),
    },
  },
} as Meta<typeof Switch>

type Story = StoryObj<typeof Switch>

const Template: Story = {
  render: function Render(args) {
    const [checked, setChecked] = useState(args.checked)

    const callout = (val: boolean) => {
      setChecked(val)
    }

    return (
      <Switch
        checked={checked}
        callout={callout}
        disabled={args.disabled}
        className={args.className}
        customId={args.customId}
        formLabelProps={args.formLabelProps}
      />
    )
  },
}

export const Basic: Story = {
  ...Template,
  args: {
    checked: true,
    formLabelProps: { label: 'This is a label' },
  },
}

export const Required: Story = {
  ...Template,
  args: {
    checked: true,
    formLabelProps: { label: 'This is a label', required: true },
  },
}

export const Disabled: Story = {
  ...Template,
  args: {
    checked: true,
    formLabelProps: { label: 'This is a label' },
    disabled: true,
  },
}

export const Tooltip: Story = {
  ...Template,
  args: {
    checked: true,
    formLabelProps: {
      label: 'This is a label',
      tooltip: { tooltipContent: 'This is a tooltip' },
    },
  },
}