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

import { DocsTemplate } from '../../../.storybook'
import { toast } from '../Toast/Toast'
import { filterStatesDummyData } from './filter-stories-helper'
import Filter from './Filter'

const meta: Meta<typeof Filter> = {
  title: 'Components/Filter/As Button Group',
  component: Filter,
  parameters: {
    docs: {
      page: () => (
        <DocsTemplate
          description={
            <span>
              The <code>Filter</code> component is a versatile and customizable
              form element that offers a variety of filter options to help users
              refine data and search results. It includes several child elements
              such as <code>Select</code>, <code>MultiSelect</code>,
              <code>Toggle</code>, <code>Picker</code>,<code>TextInput</code>,{' '}
              <code>Datepicker</code>, and allows the addition of other custom
              children elements. The <code>Filter</code>
              component empowers users to apply various filter criteria to
              quickly find the information they need.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Use the <code>Filter</code> component in data-heavy interfaces or
              search functionalities where users need to refine results based on
              specific criteria.
            </span>,
            <span key='second-bullet'>
              Provide clear labels and instructions for each filter option,
              guiding users on how to use the filters effectively.
            </span>,
            <span key='third-bullet'>
              The <code>Filter</code> component includes proper styling to
              maintain a cohesive and user-friendly design.
            </span>,
          ]}
        />
      ),
    },
  },
}

export default meta

type Story = StoryObj<typeof Filter>

const buttonGroupConfig = {
  buttons: [
    {
      icon: 'settings' as const,
      onClick: () => {
        toast({ message: 'You clicked settings button', type: 'success' })
      },
    },
  ],
}

const commonArgs = {
  filterStates: filterStatesDummyData,
  filterCallout: () => {
    toast({ message: 'You clicked filter button', type: 'success' })
  },
  cancelCallout: () => {
    toast({ message: 'You clicked cancel button', type: 'success' })
  },
  buttonGroupConfig,
}

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

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

export const Disabled: Story = {
  ...Template,
  args: {
    ...commonArgs,
    disableFilterButton: true,
  },
}

export const AppliedFilter: Story = {
  ...Template,
  args: {
    ...commonArgs,
    appliedFilters: 4,
  },
}

export const ThreeButtons: Story = {
  ...Template,
  args: {
    ...commonArgs,
    buttonGroupConfig: {
      ...buttonGroupConfig,
      buttons: [
        ...buttonGroupConfig.buttons,
        {
          icon: 'config' as const,
          onClick: () => {
            toast({ message: 'You clicked config button', type: 'success' })
          },
        },
      ],
    },
  },
}