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

import { toast } from '../Toast/Toast'
import { DocsTemplate } from '../../../.storybook'
import DatePickerComponent from './DatePicker'

const meta: Meta<typeof DatePickerComponent> = {
  title: 'Components/DatePicker',
  component: DatePickerComponent,
  parameters: {
    layout: 'centered',
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=9423-61089&p=f&t=dpvdmOj1lXymCIvb-0',
    },
    docs: {
      page: () => (
        <DocsTemplate
          figmaLink='https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=9423-61089&p=f&t=dpvdmOj1lXymCIvb-0'
          description={
            <span>
              The <code>DatePicker</code> component allows users to select a
              single date or a range of dates. It supports predefined ranges
              like "Last 7 Days" and "This Month" for quick selection and
              provides a calendar interface for manual date selection.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Use the <code>DatePicker</code> for forms, dashboards, or anywhere
              date selection is required.
            </span>,
            <span key='second-bullet'>
              Supports both single and range date selection modes.
            </span>,
            <span key='third-bullet'>
              Includes validation for manual date input.
            </span>,
            <span key='fourth-bullet'>
              Can restrict date selection to specific ranges using the{' '}
              <code>dateRestrictions</code> prop.
            </span>,
          ]}
        />
      ),
    },
  },
}

export default meta
type Story = StoryObj<typeof DatePicker>

const DatePicker = (args) => {
  const [selectedDateRange, setSelectedDateRange] = React.useState<
    Date | DateRange | undefined
  >(args.selectedDateRange)
  const [selectedDate, setSelectedDate] = React.useState<Date | undefined>(
    args.selectedDate,
  )
  if (args.type === 'range') {
    return (
      <DatePickerComponent
        {...args}
        onDateChange={(date: DateRange) => {
          setSelectedDateRange(date)
          toast({
            message: `New date range selected : ${date.from} - ${date.to}}  `,
            type: 'info',
          })
        }}
        selectedDateRange={selectedDateRange}
      />
    )
  } else {
    return (
      <DatePickerComponent
        {...args}
        onDateChange={(date: Date) => {
          setSelectedDate(date)
          toast({
            message: `New date selected : ${date} `,
            type: 'info',
          })
        }}
        selectedDate={selectedDate}
      />
    )
  }
}
const Template: Story = {
  render: (args) => (
    <div
      style={{
        // To restrict the max-width of input-box so error message wrap around in storybook.
        maxWidth: `${args.type === 'range' ? '290px' : '270px'}`,
      }}
    >
      <DatePicker {...args} />
    </div>
  ),
}

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

export const exposed: Story = {
  ...Template,
  args: {
    isExposed: true,
  },
}

export const withoutTextInput: Story = {
  ...Template,
  args: {
    showDateValue: false,
  },
}

export const WithLabel: Story = {
  ...Template,
  args: {
    labelText: 'Pick a Date',
  },
}

export const SingleDisabledWithoutExposed: Story = {
  ...Template,
  args: {
    disabled: true,
  },
}

export const WithDefaultDate: Story = {
  ...Template,
  args: {
    selectedDate: new Date(),
    reset: true,
  },
}

export const withLayerPosition: Story = {
  ...Template,
  args: {
    layerPosition: 2,
  },
}

export const RangeBasic: Story = {
  ...Template,
  args: {
    type: 'range',
  },
}

export const rangeExposed: Story = {
  ...Template,
  args: {
    type: 'range',
    isExposed: true,
  },
}

export const RangeWithPlaceholder: Story = {
  ...Template,
  args: {
    type: 'range',
    placeholder: 'Created On',
  },
}

export const RangeWithDefaultDateRange: Story = {
  ...Template,
  args: {
    type: 'range',
    selectedDateRange: {
      from: new Date(new Date().setDate(new Date().getDate() - 7)),
      to: new Date(),
    },
    reset: true,
  },
}

export const rangeWithoutTextInput: Story = {
  ...Template,
  args: {
    showDateValue: false,
    type: 'range',
  },
}

export const WithDateRestrictionsBeforeToday: Story = {
  ...Template,
  args: {
    dateRestrictions: {
      beforeDate: new Date(),
    },
  },
}

export const WithDateRestrictionsAfterToday: Story = {
  ...Template,
  args: {
    dateRestrictions: {
      afterDate: new Date(),
    },
  },
}

export const WithPastRestrictionRange: Story = {
  ...Template,
  args: {
    type: 'range',
    dateRestrictions: {
      beforeDate: new Date(),
    },
  },
}

export const WithFutureRestrictionRange: Story = {
  ...Template,
  args: {
    type: 'range',
    dateRestrictions: {
      afterDate: new Date(),
    },
  },
}

export const DisableAutoClose: Story = {
  ...Template,
  args: {
    disableAutoClose: true,
  },
}

export const SingleWithClearButton: Story = {
  ...Template,
  args: {
    clear: true,
  },
}

export const RangeWithClearButton: Story = {
  ...Template,
  args: {
    type: 'range',
    clear: true,
  },
}

export const RangeWithSelectedStartDateOutsideRestrictions: Story = {
  ...Template,
  args: {
    type: 'range',
    // Selected date range starts 30 days ago (which will be outside restrictions)
    selectedDateRange: {
      from: new Date(new Date().setDate(new Date().getDate() - 30)),
      to: new Date(),
    },
    // Date restrictions only allow dates from 7 days ago onwards
    dateRestrictions: {
      beforeDate: new Date(new Date().setDate(new Date().getDate() - 7)),
    },
    labelText: 'Test Restricted Start Date',
  },
}

export const RangeWithSelectedEndDateOutsideRestrictions: Story = {
  ...Template,
  args: {
    type: 'range',
    // Selected date range ends 5 days from now (which will be outside restrictions)
    selectedDateRange: {
      from: new Date(new Date().setDate(new Date().getDate() - 7)),
      to: new Date(new Date().setDate(new Date().getDate() + 5)),
    },
    dateRestrictions: {
      afterDate: new Date(new Date().setDate(new Date().getDate())),
    },
    labelText: 'Test Restricted End Date',
  },
}

export const SingleWithSelectedDateOutsideRestrictions: Story = {
  ...Template,
  args: {
    type: 'single',
    // Selected date is 5 days from now (which will be outside restrictions)
    selectedDate: new Date(new Date().setDate(new Date().getDate() + 5)),
    dateRestrictions: {
      afterDate: new Date(new Date().setDate(new Date().getDate())),
    },
    labelText: 'Test Restricted Future Date',
  },
}

export const WithDescription: Story = {
  ...Template,
  args: {
    labelTooltip: {
      tooltipContent: 'This is the label tooltip for the date picker.',
    },
    labelText: 'Pick a Date',
  },
}

export const WithErrorText: Story = {
  ...Template,
  args: {
    error: {
      text: 'This is the error text for the date picker',
      showError: true,
    },
    labelText: 'Pick a Date',
  },
}
export const RangeNoButtons: Story = {
  ...Template,
  args: {
    type: 'range',
    actionButtons: {
      last7Days: false,
      next7Days: false,
      thisWeekToDate: false,
      thisWeek: false,
      lastWeek: false,
      nextWeek: false,
      lastMonth: false,
      thisMonth: false,
      thisMonthToDate: false,
      nextMonth: false,
      thisQuarter: false,
      thisQuarterToDate: false,
      lastQuarter: false,
      nextQuarter: false,
      thisYear: false,
      thisYearToDate: false,
      lastYear: false,
      nextYear: false,
    },
  },
}

export const SingleNoButtons: Story = {
  ...Template,
  args: {
    type: 'single',
    actionButtons: {
      today: false,
      yesterday: false,
      tomorrow: false,
    },
  },
}

export const WithActionButtons: Story = {
  ...Template,
  args: {
    type: 'range',
    actionButtons: {
      last7Days: false,
      next7Days: false,
      nextWeek: false,
      nextMonth: false,
      thisQuarter: false,
      thisYear: false,
      nextYear: false,
    },
  },
}

export const WithDatePickerPosition: Story = {
  ...Template,
  args: {
    type: 'range',
    position: 'right',
  },
}