"use client"

import * as React from "react"
import { CalendarIcon } from "@radix-ui/react-icons"
import { addDays, format } from "date-fns"
import { DateRange } from "react-day-picker"

import { cn } from "../../design-lib/utils"
import Stack from "../molecules/stack"
import { Button } from "./button"
import { Calendar } from "./calendar"
import { Popover, PopoverContent, PopoverTrigger } from "./popover"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "./select"

export function DatePicker({
  range,
  preset,
  onPickDate,
  placeholder,
}: {
  range?: boolean
  preset?: {
    placeholder?: string
    datas: {
      value: number
      label: string
    }[]
  }
  onPickDate?: (date: Date | DateRange | undefined) => void
  placeholder?: string
}) {
  const [rangeDate, setRangeDate] = React.useState<DateRange | undefined>({
    from: new Date(2022, 0, 20),
    to: addDays(new Date(2022, 0, 20), 20),
  })
  const [date, setDate] = React.useState<Date>()

  const [presetDate, setPresetDate] = React.useState<Date>()

  if (range && preset) {
    throw new Error("DatePicker cannot have both range and preset props")
  }

  return (
    <Stack>
      {range ? (
        <Popover>
          <PopoverTrigger asChild>
            <Button
              id="date"
              variant={"outline"}
              className={cn(
                "h-11 w-[300px] justify-start rounded-md text-left font-normal",
                !rangeDate && "text-muted-foreground"
              )}
            >
              <CalendarIcon className="mr-2 h-4 w-4" />
              {rangeDate?.from ? (
                rangeDate.to ? (
                  <>
                    {format(rangeDate.from, "LLL dd, y")} -{" "}
                    {format(rangeDate.to, "LLL dd, y")}
                  </>
                ) : (
                  format(rangeDate.from, "LLL dd, y")
                )
              ) : (
                <span>{placeholder ?? "Pick a date"}</span>
              )}
            </Button>
          </PopoverTrigger>
          <PopoverContent
            className="w-auto border-none !p-0 shadow-none"
            align="start"
          >
            <Calendar
              initialFocus
              mode="range"
              defaultMonth={rangeDate?.from}
              selected={rangeDate}
              onSelect={(range) => {
                setRangeDate(range)
                onPickDate?.(range)
              }}
              numberOfMonths={2}
            />
          </PopoverContent>
        </Popover>
      ) : preset ? (
        <Popover>
          <PopoverTrigger asChild>
            <Button
              variant={"outline"}
              className={cn(
                "h-11 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>{placeholder ?? "Pick a date"}</span>
              )}
            </Button>
          </PopoverTrigger>
          <PopoverContent
            align="start"
            className="flex w-auto flex-col space-y-2 rounded-xl p-2"
          >
            <Select
              onValueChange={(value) => {
                setPresetDate(addDays(new Date(), parseInt(value)))
                onPickDate?.(addDays(new Date(), parseInt(value)))
              }}
            >
              <SelectTrigger>
                <SelectValue placeholder={preset.placeholder ?? "Select"} />
              </SelectTrigger>
              <SelectContent position="popper">
                {preset.datas.length > 0 ? (
                  preset.datas.map((item) => (
                    <SelectItem key={item.value} value={String(item.value)}>
                      {item.label}
                    </SelectItem>
                  ))
                ) : (
                  <>
                    <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>
            <Calendar
              mode="single"
              selected={presetDate}
              onSelect={(preset) => {
                setPresetDate(preset)
                onPickDate?.(preset)
              }}
            />
          </PopoverContent>
        </Popover>
      ) : (
        <Popover>
          <PopoverTrigger asChild>
            <Button
              variant={"outline"}
              className={cn(
                "h-11 w-[240px] justify-start text-left font-normal",
                !date && "text-muted-foreground"
              )}
            >
              <CalendarIcon className="mr-2 h-4 w-4" />
              {date ? (
                format(date, "PPP")
              ) : (
                <span>{placeholder ?? "Pick a date"}</span>
              )}
            </Button>
          </PopoverTrigger>
          <PopoverContent className="w-auto border-none p-0" align="start">
            <Calendar
              mode="single"
              selected={date}
              onSelect={(date) => {
                setDate(date)
                onPickDate?.(date)
              }}
              initialFocus
            />
          </PopoverContent>
        </Popover>
      )}
    </Stack>
  )
}