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

import { DocsTemplate } from '../../../.storybook'
import SearchBar from './SearchBar'
import { toast } from '../Toast/Toast'
import { notEmpty } from '../../services/HelperServiceTyped'

const meta: Meta<typeof SearchBar> = {
  title: 'Components/SearchBar',
  component: SearchBar,
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=181-333&t=9R4mlUY42yEaNlLp-4',
    },
    docs: {
      page: () => (
        <DocsTemplate
          figmaLink='https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=181-333&t=9R4mlUY42yEaNlLp-4'
          description={
            <span>
              The <code>SearchBar</code> component enables users to search and
              filter data within a table or list, facilitating efficient
              exploration and retrieval of specific information. It consists of
              a text input field where users can enter their search queries. The{' '}
              <code>SearchBar</code> empowers users to quickly locate relevant
              data, enhancing the usability and effectiveness of the interface.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Integrate the <code>SearchBar</code> component in data-intensive
              sections, such as tables or lists, where users may need to find
              specific items or information.
            </span>,
            'Optionally include a placeholder text inside the component to guide users on what they can search for, encouraging smooth interaction.',
          ]}
        />
      ),
    },
  },
}

export default meta

type Story = StoryObj<typeof SearchBar>

const Template: Story = {
  render: function Render(args) {
    const [value, setValue] = useState(args.value)
    const updateValue = (value: string) => {
      setValue(value)
      if (args.debounce && notEmpty(value)) {
        toast({
          type: 'success',
          message: `The debounce of ${args.debounce} has been executed!`,
        })
      }
    }
    useEffect(() => {
      if (args.value) {
        setValue(args.value)
      }
    }, [args.value])
    return <SearchBar {...args} value={value} onChange={updateValue} />
  },
}

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

export const ClearExample: Story = {
  ...Template,
  args: {
    value: 'Clear is visible',
  },
}

export const Debounce: Story = {
  ...Template,
  args: {
    value: '',
    debounce: 300,
  },
}

export const AutoFocus: Story = {
  ...Template,
  args: {
    value: '',
    autoFocus: true,
  },
}

export const WithPlaceholder: Story = {
  ...Template,
  args: {
    value: '',
    placeholder: 'Placeholder Text Here',
  },
}

export const WithLongPlaceholder: Story = {
  ...Template,
  args: {
    value: '',
    placeholder:
      'This is a long placeholder so we need to add an ellipsis for it.',
  },
}

export const MinWidthOverride: Story = {
  ...Template,
  args: {
    value: '',
    minWidth: 500,
  },
}

export const KeyUp: Story = {
  ...Template,
  args: {
    value: '',
    placeholder: 'Press Enter to see the keyUpCallout',
    keyUpCallout: () => {
      toast({
        type: 'success',
        message: 'The keyUpCallout has been executed!',
      })
    },
  },
}

export const SymbologyPrefixStripping: Story = {
  ...Template,
  args: {
    value: '',
    placeholder: 'Try pasting ~ABarcode123 or ]C1Barcode123',
    shouldStripSymbologyPrefix: true,
  },
}