import { CalendarIcon } from "@/assets/icons";
import { cn } from "@/lib/utils";
import {
  Control,
  Controller,
  FieldValues,
  Path,
  RegisterOptions,
} from "react-hook-form";
import MultiDatePicker, { DateObject } from "react-multi-date-picker";
import TimePicker from "react-multi-date-picker/plugins/time_picker";

interface IProps<T extends FieldValues> {
  control: Control<T>;
  name: Path<T>;
  label: string;
  placeholder?: string;
  required?: boolean;
  multiple?: boolean;
  range?: boolean;
  onlyMonthPicker?: boolean;
  onlyYearPicker?: boolean;
  minDate?: number;
  maxDate?: number;
  timePicker?: boolean;
  rules?: Omit<
    RegisterOptions<T, Path<T>>,
    "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled"
  >;
}

const DatePicker = <T extends FieldValues>({
  control,
  name,
  label,
  multiple = false,
  placeholder,
  required,
  range = false,
  timePicker = false,
  onlyMonthPicker = false,
  onlyYearPicker = false,
  rules,
  maxDate,
  minDate,
}: IProps<T>) => {
  return (
    <div>
      <label
        htmlFor={name}
        className="text-body-sm font-medium capitalize text-dark dark:text-white"
      >
        {label}
        {required && <span className="ml-1 select-none text-error">*</span>}
      </label>

      <div className="mt-3">
        <Controller
          control={control}
          name={name}
          rules={rules}
          render={({
            field: { onChange, name, value },
            formState: { errors },
          }) => {
            const error = errors[name];

            return (
              <>
                <div className="relative">
                  <MultiDatePicker
                    range={range}
                    minDate={minDate}
                    maxDate={maxDate}
                    onlyMonthPicker={onlyMonthPicker}
                    plugins={
                      timePicker ? [<TimePicker position="bottom" />] : []
                    }
                    onlyYearPicker={onlyYearPicker}
                    multiple={multiple}
                    onChange={(date: DateObject | DateObject[] | null) => {
                      if (!date) {
                        return onChange("");
                      }

                      if (Array.isArray(date)) {
                        const unixTimestamps = date.map((d) => d.toUnix());
                        onChange(unixTimestamps);
                      } else if (date instanceof DateObject) {
                        onChange(date.isValid ? date.toUnix() : "");
                      }
                    }}
                    format={"YYYY/MM/DD"}
                    containerClassName="w-full"
                    inputClass={cn(
                      "w-full rounded-lg border-[1.5px] border-stroke bg-transparent px-5.5 py-3 pl-12.5 text-dark outline-none transition focus:border-primary disabled:cursor-default disabled:bg-gray-2 dark:border-dark-3 dark:bg-dark-2 dark:text-white dark:focus:border-primary dark:disabled:bg-dark",
                      error && "!border-red focus:!border-red dark:!border-red",
                    )}
                    placeholder={placeholder}
                  />
                  <span className="absolute left-4.5 top-1/2 -translate-y-1/2">
                    <CalendarIcon />
                  </span>
                </div>

                {error && (
                  <p className="text-red mt-1.5 text-sm text-error">
                    {error.message as string}
                  </p>
                )}
              </>
            );
          }}
        />
      </div>
    </div>
  );
};

export default DatePicker;