import * as React from "react";

import { useState } from "react";

import { FieldPath, FieldValues, useFormContext } from "react-hook-form";

// ShadCn
import {
  Button,
  Calendar,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  InputProps,
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/ui";

import { UseControllerProps } from "react-hook-form";

import { FormLabel, FormLabelProps } from "./FormLabel";
import { FormInputProps } from "./FormProps";

import { CalendarIcon } from "lucide-react";

import { cn } from "@/lib/utils";
import { t } from "i18next";
import { FormErrorMessage } from "./FormErrorMessage";

type FormDatePickerFieldProps<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = InputProps & FormInputProps & Partial<FormLabelProps> & UseControllerProps<TFieldValues, TName>;

/*const loadDateFnsLocale = async (locale: Locale) => {
  return await import(`date-fns/locale/${locale.code}/index.js`);
};*/

export const FormDatePickerField = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & FormDatePickerFieldProps
>((props: FormDatePickerFieldProps, ref) => {
  const { label, placeholder, hint, description, required, className, name } = props;
  const { control } = useFormContext();
  //const { locale } = loadDateFnsLocale();

  /*if (locale) {
    setDefaultOptions({ locale: locale.default });
  }*/

  const [isPopoverOpen, setIsPopoverOpen] = useState(false);

  return (
    <FormField
      control={control}
      name={name}
      rules={{ required }}
      render={({ field }) => (
        <FormItem ref={ref} className={cn(className, "flex flex-col")}>
          {label && <FormLabel label={label} hint={hint} required={required} />}

          <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
            <PopoverTrigger asChild>
              <FormControl>
                <Button
                  variant={"secondary"}
                  className={cn(
                    "pl-3 text-left font-normal",
                    !field.value && "text-muted-foreground"
                  )}
                >
                  {field.value ? (
                    new Date(field.value).toLocaleDateString() //"en-US", DATE_OPTIONS)
                  ) : placeholder ? (
                    placeholder
                  ) : (
                    <span>{t("common.pick_date")}</span>
                  )}
                  <CalendarIcon className='w-4 h-4 ml-auto text-' />
                </Button>
              </FormControl>
            </PopoverTrigger>
            <PopoverContent className='w-auto p-0' align='start'>
              <Calendar
                className='bg-background'
                mode='single'
                captionLayout='buttons'
                defaultMonth={field.value}
                selected={new Date(field.value)}
                onSelect={(e) => {
                  field.onChange(e);
                  setIsPopoverOpen(false);
                }}
                disabled={(date) => date < new Date("1980-01-01")}
                weekStartsOn={1}
                fixedWeeks={true}
                fromYear={2024}
                toYear={new Date().getFullYear() + 1}
                initialFocus
              />
            </PopoverContent>
          </Popover>

          {description && <FormDescription>{description}</FormDescription>}
          <FormErrorMessage />
        </FormItem>
      )}
    />
  );
});
