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

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

const meta: Meta<typeof Switch> = {
  title: 'Components/Switch',
  component: Switch,
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-347&p=f&t=9R4mlUY42yEaNlLp-0',
    },
    docs: {
      page: () => (
        <DocsTemplate
          figmaLink='https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=121-347&p=f&t=9R4mlUY42yEaNlLp-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>,
          ]}
        />
      ),
    },
  },
}

export default meta

type Story = StoryObj<typeof Switch>

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

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

    return (
      <Switch
        {...args}
        checked={checked}
        callout={callout}
        confirmation={undefined}
        popoverProps={undefined}
      />
    )
  },
}

export const Basic: Story = {
  ...Template,
  args: {
    checked: true,
  },
}

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

const ConfirmationTemplate: StoryObj<typeof Switch> = {
  render: function Render(args) {
    const [checked, setChecked] = useState(args.checked)

    return (
      <Switch
        {...args}
        checked={checked}
        confirmation={{
          ...args.confirmation,
          header: args.confirmation?.header ?? 'Are you sure?',
          type: args.confirmation?.type ?? 'blue',
          body:
            args.confirmation?.body ??
            'This will perform some action. Would you like to continue?',
          confirmCallout: () => {
            toast({ message: 'You did it!', type: 'success' })
            setChecked(!checked)
          },
        }}
        callout={undefined}
      />
    )
  },
}

const confirmation = {
  header: 'Are you sure?',
  type: 'blue' as const,
  body: 'This will perform some action. Would you like to continue?',
}

export const WithConfirmation: Story = {
  ...ConfirmationTemplate,
  args: {
    checked: true,
    confirmation: {
      ...confirmation,
      confirmCallout: () => {},
    },
  },
}

export const ConfirmationPlacement: Story = {
  ...ConfirmationTemplate,
  args: {
    checked: true,
    confirmation: {
      ...confirmation,
      confirmCallout: () => {},
    },
    popoverProps: {
      position: 'left',
      children: () => <></>,
      popoverContent: () => <></>,
    },
  },
}