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

import { DatePickerDemo } from './date-picker'
import { HTMLAttributes, useState } from 'react'
import { DateRange } from 'react-day-picker'
import { addDays, format } from 'date-fns'

import { cn } from '@lib/utils'
import { Button } from '@components/ui/button/button'
import { Calendar } from '@components/ui/calendar/calendar'
import { Popover, PopoverContent, PopoverTrigger } from '@components/ui/popover/popover'
import { CalendarIcon } from '@radix-ui/react-icons'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@components/ui/select/select'

const meta = {
  title: 'Date Picker',
  component: DatePickerDemo,
  tags: ['autodocs'],
  parameters: {
    docs: {
      description: {
        component: 'A date picker component with range and presets using the calendar, popover and select components.',
      },
    },
  },
} satisfies Meta<typeof DatePickerDemo>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  parameters: {
    docs: {
      description: {
        story: 'A basic date picker component for single date selection.',
      },
    },
  },
  render: () => (
    <div className="preview flex min-h-[350px] w-full justify-center p-10 items-center">
      <DatePickerDemo />
    </div>
  ),
}

const DateRangePickerExample = ({ className }: HTMLAttributes<HTMLDivElement>) => {
  const [date, setDate] = useState<DateRange | undefined>({
    from: new Date(2022, 0, 20),
    to: addDays(new Date(2022, 0, 20), 20),
  })

  return (
    <div className="preview flex min-h-[350px] w-full justify-center p-10 items-center">
      <div className={cn('grid gap-2', className)}>
        <Popover>
          <PopoverTrigger asChild>
            <Button
              id="date"
              variant={'outline'}
              className={cn('w-[300px] justify-start text-left font-normal', !date && 'text-muted-foreground')}
            >
              <CalendarIcon className="mr-2 h-4 w-4" />
              {date?.from ? (
                date.to ? (
                  <>
                    {format(date.from, 'LLL dd, y')} - {format(date.to, 'LLL dd, y')}
                  </>
                ) : (
                  format(date.from, 'LLL dd, y')
                )
              ) : (
                <span>Pick a date</span>
              )}
            </Button>
          </PopoverTrigger>
          <PopoverContent className="w-auto p-0" align="start">
            <Calendar
              initialFocus
              mode="range"
              defaultMonth={date?.from}
              selected={date}
              onSelect={setDate}
              numberOfMonths={2}
            />
          </PopoverContent>
        </Popover>
      </div>
    </div>
  )
}

export const DateRangePicker: Story = {
  parameters: {
    docs: {
      description: {
        story: 'A date picker that allows selecting a date range with a dual-month calendar view.',
      },
    },
  },
  render: () => <DateRangePickerExample />,
}

const DatePickerWithPresetsExample = () => {
  const [presetDate, setPresetDate] = useState<Date>()

  return (
    <div className="preview flex min-h-[350px] w-full justify-center p-10 items-center">
      <Popover>
        <PopoverTrigger asChild>
          <Button
            variant={'outline'}
            className={cn('w-[240px] justify-start text-left font-normal', !presetDate && 'text-muted-foreground')}
          >
            <CalendarIcon className="mr-2 h-4 w-4" />
            {presetDate ? format(presetDate, 'PPP') : <span>Pick a date</span>}
          </Button>
        </PopoverTrigger>
        <PopoverContent align="start" className="flex w-auto flex-col space-y-2 p-2">
          <Select onValueChange={(value) => setPresetDate(addDays(new Date(), parseInt(value)))}>
            <SelectTrigger>
              <SelectValue placeholder="Select" />
            </SelectTrigger>
            <SelectContent position="popper">
              <SelectItem value="0">Today</SelectItem>
              <SelectItem value="1">Tomorrow</SelectItem>
              <SelectItem value="3">In 3 days</SelectItem>
              <SelectItem value="7">In a week</SelectItem>
            </SelectContent>
          </Select>
          <div className="rounded-md border">
            <Calendar mode="single" selected={presetDate} onSelect={setPresetDate} />
          </div>
        </PopoverContent>
      </Popover>
    </div>
  )
}

export const WithPresets: Story = {
  parameters: {
    docs: {
      description: {
        story:
          'A date picker with preset options (Today, Tomorrow, In 3 days, In a week) and a calendar for custom selection.',
      },
    },
  },
  render: () => <DatePickerWithPresetsExample />,
}
