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

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

const meta: Meta<typeof Filter> = {
  title: 'Components/Filter',
  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 Template: Story = {
  render: (args) => {
    return <Filter {...args} />
  },
}

export const Basic: Story = {
  ...Template,
  args: {
    filterStates: filterStatesDummyData,
    filterCallout: () => {
      toast({ message: 'You clicked filter button', type: 'success' })
    },
    cancelCallout: () => {
      toast({ message: 'You clicked cancel button', type: 'success' })
    },
  },
}

export const DateRangeWithoutSearch: Story = {
  ...Template,
  args: {
    filterStates: {
      ...filterStatesDummyData,
      dates: {
        type: 'dates',
        defaultValue: {
          start_date: moment(),
          end_date: moment(),
        },
        labelText: 'Date Range Without Search',
        stateName: 'date_range_no_search',
      },
    },
  },
}

export const DateRangeWithFutureDatesEnabled: Story = {
  ...Template,
  args: {
    filterStates: {
      ...filterStatesDummyData,
      dates: {
        type: 'dates',
        defaultValue: {
          start_date: moment(),
          end_date: moment(),
        },
        labelText: 'Date Range With Future Dates Enabled',
        stateName: 'date_range_future',
      },
    },
  },
}

export const WithAppliedFilterCount: Story = {
  ...Template,
  args: {
    filterStates: filterStatesDummyData,
    filterCallout: () => {
      toast({ message: 'You clicked filter button', type: 'success' })
    },
    cancelCallout: () => {
      toast({ message: 'You clicked cancel button', type: 'success' })
    },
    appliedFilters: 4,
  },
}

export const WithCustomChildren: Story = {
  ...Template,
  args: {
    filterStates: filterStatesDummyData,
    filterCallout: () => {
      toast({ message: 'You clicked filter button', type: 'success' })
    },
    cancelCallout: () => {
      toast({ message: 'You clicked cancel button', type: 'success' })
    },
    children: ({ close }) => (
      <TextInput
        type='text'
        placeholder={'Search'}
        callout={() => {
          return
        }}
        value={''}
        labelText='Search'
        debounce={250}
        keyUp={() => close?.()}
        stateName={'search'}
      />
    ),
  },
}

export const WithTooltip: Story = {
  ...Template,
  args: {
    filterStates: filterStatesDummyData,
    filterCallout: () => {
      toast({ message: 'You clicked filter button', type: 'success' })
    },
    cancelCallout: () => {
      toast({ message: 'You clicked cancel button', type: 'success' })
    },
  },
}

export const WithRightLabel: Story = {
  ...Template,
  args: {
    filterStates: filterStatesDummyData,
    filterCallout: () => {
      toast({ message: 'You clicked filter button', type: 'success' })
    },
    cancelCallout: () => {
      toast({ message: 'You clicked cancel button', type: 'success' })
    },
  },
}

export const DisabledFilter: Story = {
  ...Template,
  args: {
    filterStates: filterStatesDummyData,
    filterCallout: () => {
      toast({ message: 'You clicked filter button', type: 'success' })
    },
    cancelCallout: () => {
      toast({ message: 'You clicked cancel button', type: 'success' })
    },
    disableFilterButton: true,
  },
}

const MobileFilterWrapper = (args): React.JSX.Element => {
  const isMobileView = useMediaQuery({ type: 'max', breakpoint: 'md' })

  return isMobileView ? (
    <Filter {...args} />
  ) : (
    <h2>
      This view is available when the viewport is &lt; 768px. Please resize the
      screen to see the mobile filter.
    </h2>
  )
}

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

export const MobileFilter: Story = {
  ...Template2,
  args: {
    filterStates: filterStatesDummyData,
    filterCallout: () => {
      toast({ message: 'You clicked filter button', type: 'success' })
    },
    cancelCallout: () => {
      toast({ message: 'You clicked cancel button', type: 'success' })
    },
  },
}

MobileFilter.storyName = 'Responsive'

export const MobileFilterWithoutButtonText: Story = {
  ...Template2,
  args: {
    filterStates: filterStatesDummyData,
    filterCallout: () => {
      toast({ message: 'You clicked filter button', type: 'success' })
    },
    cancelCallout: () => {
      toast({ message: 'You clicked cancel button', type: 'success' })
    },
    hideMobileButtonText: true,
  },
}

MobileFilterWithoutButtonText.storyName = 'Responsive without button text'