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

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

const meta: Meta<typeof FormLabel> = {
  title: 'Components/FormComponents/FormLabel',
  component: FormLabel,
  parameters: {
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              The <code>FormLabel</code> component is a consistent label style
              specifically designed to accompany various form components. It
              serves as a descriptive identifier for form inputs, checkboxes,
              radio buttons, and other form elements, ensuring clarity and
              providing visual consistency throughout the form. The{' '}
              <code>FormLabel</code> aids users in understanding the purpose of
              each form element and improves overall usability.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Some form components that use the <code>FormLabel</code> include:{' '}
              <code key='bullet-1'>TextInput</code>,{' '}
              <code key='bullet-2'>Select</code>,{' '}
              <code key='bullet-3'>MultiSelect</code>,{' '}
              <code key='bullet-4'>Slider</code>, and{' '}
              <code key='bullet-5'>Picker</code>.
            </span>,
            <span key='second-bullet'>
              Apply the <code>FormLabel</code> component to all form elements,
              such as text inputs, selects, checkboxes, and radio buttons, to
              provide clear identification and context.
            </span>,
            <span key='third-bullet'>
              Use concise and meaningful labels that accurately describe the
              corresponding form elements, helping users complete the form
              efficiently.
            </span>,
          ]}
        />
      ),
    },
  },
}
export default meta

type Story = StoryObj<typeof FormLabel>

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

export const Basic: Story = {
  ...Template,
  args: {
    label: 'The Label',
  },
}

export const Error: Story = {
  ...Template,
  args: {
    label: 'The Label',
    error: true,
  },
}

export const Required: Story = {
  ...Template,
  args: {
    label: 'The Label',
    required: true,
  },
}

export const Tooltip: Story = {
  ...Template,
  args: {
    label: 'The Label',
    tooltip: {
      tooltipContent: 'This is the tooltip content.',
    },
  },
}

export const RightLabel: Story = {
  ...Template,
  args: {
    label: 'The Label',
    rightLabel: 'The Right Label',
  },
}

export const Disabled: Story = {
  ...Template,
  args: {
    label: 'The Label',
    disabled: true,
  },
}