/* eslint-disable no-nested-ternary */

"use client";

import { addDays } from "date-fns";
import { AlertCircleIcon } from "lucide-react";
import * as React from "react";
import type { DateRange } from "react-day-picker";

import { useLocale } from "@/hooks/useLocale";
import { cn } from "@/libs/utils";

import { Button } from "../button/button";
import { Calendar } from "../calendar/calendar";
import LIcon from "../lucid-icon/lucid-icon";
import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover";
import TriggerButton from "../trigger-button/trigger-button";
import styles from "./date-range-picker.module.css";

export function CalendarDateRangePicker({
  className,
}: React.HTMLAttributes<HTMLDivElement>) {
  const { t } = useLocale();
  const [date, setDate] = React.useState<DateRange | undefined>({
    from: new Date(2023, 0, 20),
    to: addDays(new Date(2023, 0, 20), 20),
  });

  return (
    <div className={cn("grid gap-2", className)}>
      <Popover>
        <PopoverTrigger className="w-full">
          <TriggerButton
            size="lg"
            label={t("Check-in and Check-out")}
            leftIcon={<LIcon name="Calendar" />}
            fullWidth
            value={`${date?.from?.toLocaleDateString()} - ${date?.to?.toLocaleDateString()}`}
          />
        </PopoverTrigger>
        <PopoverContent className={styles.popoverContent} align="end">
          <div className={styles.popoverHeaderWrapper}>
            <div className={styles.popoverHeaderContent}>
              <div className={styles.popoverHeaderIconWrapper}>
                <AlertCircleIcon className={styles.popoverHeaderIcon} />
              </div>
              <div className={styles.popoverHeaderContentText}>
                {t("Select a date to see hotel availability and prices")}
              </div>
            </div>
          </div>
          <div>
            <Calendar
              initialFocus
              mode="range"
              defaultMonth={date?.from}
              selected={date}
              onSelect={setDate}
              numberOfMonths={2}
            />
          </div>
          <div className={styles.popoverFooterWrapper}>
            <div className={styles.popoverFooterContent}>
              <span>{t("Check-in")}</span>
              <span>-</span>
              <span className="text-gray-500">{t("Check-out")}</span>
            </div>
            <Button size="sm" className="min-w-[105px]">
              {t("Apply")}
            </Button>
          </div>
        </PopoverContent>
      </Popover>
    </div>
  );
}