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

import PickerComponent from './Picker'
import { DocsTemplate } from '../../../.storybook'

const options = [
  {
    id: 1,
    text: 'Option 1',
    value: 'option-1',
  },
  {
    id: 2,
    text: 'Option 2',
    value: 'option-2',
  },
  {
    id: 3,
    text: 'Option 3',
    value: 'option-3',
  },
]

const meta: Meta<typeof PickerComponent> = {
  title: 'Components/FormComponents/Picker',
  component: PickerComponent,
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=324-3844&t=9R4mlUY42yEaNlLp-4',
    },
    docs: {
      page: () => (
        <DocsTemplate
          figmaLink='https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=324-3844&t=9R4mlUY42yEaNlLp-4'
          description={
            <span>
              The <code>Picker</code> component is a form element that presents
              users with a set of three quick options for one-click selection.
              It is designed to provide a faster selection experience compared
              to a standard <code>Select</code> component, making it ideal for
              situations where users need to make swift choices from a limited
              range of options.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Use the <code>Picker</code> component in forms or settings
              sections where users need to make quick selections from a small
              set of options.
            </span>,
            <span key='second-bullet'>
              Limit the options to three for optimal user experience, ensuring
              that the choices are straightforward and easy to comprehend.
            </span>,
            <span key='third-bullet'>
              If more than three options are required, consider using a{' '}
              <code>Select</code> component for a more comprehensive selection.
            </span>,
          ]}
        />
      ),
    },
  },
}

export default meta

const Picker = (args) => {
  const [active, setActive] = useState(args.state ?? options[0])

  const updateSelected = (value) => {
    const activeOption = options.find((item) => item.value === value)
    setActive(activeOption || options[0])
  }
  return (
    <PickerComponent
      {...args}
      state={active}
      stateName='value'
      callout={(_, value) => updateSelected(value)}
    />
  )
}
type Story = StoryObj<typeof Picker>

const Template: Story = {
  render: (args) => {
    return <Picker {...args} />
  },
}
export const Basic: Story = {
  ...Template,
  args: {
    options,
    valuesAreBooleans: false,
    disabled: false,
  },
}

export const Label: Story = {
  ...Template,
  args: {
    options,
    labelText: 'The Label',
  },
}

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

export const DisabledWithTooltip: Story = {
  ...Template,
  args: {
    state: options[1],
    options,
    labelText: 'The Label',
    disabled: true,
    tooltip: {
      tooltipContent: 'This is disabled because of some condition.',
    },
  },
}

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

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

export const LabelTooltip: Story = {
  ...Template,
  args: {
    options,
    labelText: 'The Label',
    labelTooltip: {
      tooltipContent: 'This is the tooltip.',
    },
  },
}

export const WithError: Story = {
  ...Template,
  args: {
    labelText: 'The Label',
    options,
    error: true,
  },
}

export const ExposedFilterVariant: Story = {
  ...Template,
  args: {
    options,
    exposedFilterVariant: true,
  },
}

export const ExposedFilterVariantWithTooltips: Story = {
  ...Template,
  parameters: {
    docs: {
      description: {
        story:
          'Tooltips are optional per option. This example shows that only some options have tooltips to demonstrate the optional nature of the feature.',
      },
    },
  },
  args: {
    options: [
      {
        ...options[0],
        tooltip: {
          tooltipContent: 'Weeks of Supply',
        },
      },
      {
        ...options[1],
        tooltip: {
          tooltipContent: 'Weeks of Cover',
        },
      },
      {
        ...options[2],
        // This option intentionally has no tooltip to show that tooltips are optional
      },
    ],
    exposedFilterVariant: true,
  },
}