import React, { useEffect, useState } from "react";
import styles from "./DatePicker.module.css";
import DatePickerItem from "./DatePickerItem";
import { IDate, getDateAsString } from "@/services/date";
import { useTranslations } from "@/hooks/translations";

interface DatePickerProps {
  onDateChange: (selectedDate: string | IDate) => void;
}

const DatePicker: React.FC<DatePickerProps> = ({
  onDateChange,
}) => {
  const { i18n } = useTranslations();
  const locale = i18n.language;
  const currentDate = new Date();
  const [selectedDate, setSelectedDate] = useState<string | IDate>(
    getDateAsString(currentDate)
  );

  const days = Array.from({ length: 93 }, (_, index) => {
    
    if (index + 1 > 62) {
      return (index + 1 - 62).toString();
    }
    if (index + 1 > 31) {
      return (index + 1 - 31).toString();
    }
    return (index + 1).toString()
  });
  
  const months = Array.from({ length: 36 }, (_, index) =>
    new Date(0, index).toLocaleDateString(locale, { month: "long" })
  );
  const years = Array.from({ length: 81 }, (_, index) =>
    (currentDate.getFullYear() - 80 + index).toString()
  );

  const handleDaySelect = (day: string) => {
    const newDate = new Date(getDateAsString(selectedDate).replace(/-/g, "/"));
    newDate.setDate(parseInt(day));
    setSelectedDate(getDateAsString(newDate));
  };

  const handleMonthSelect = (month: string) => {
    const newDate = new Date(getDateAsString(selectedDate).replace(/-/g, "/"));
    newDate.setMonth(months.indexOf(month));
    setSelectedDate(getDateAsString(newDate));
  };

  const handleYearSelect = (year: string) => {
    const newDate = new Date(getDateAsString(selectedDate).replace(/-/g, "/"));
    newDate.setFullYear(parseInt(year));
    setSelectedDate(getDateAsString(newDate));
  };

  useEffect(() => {
    if (onDateChange) {
      onDateChange(selectedDate); // Call the callback when selectedDate changes
    }
  }, [selectedDate, onDateChange]);


  return (
    <>
      <div className={styles["date-picker-container"]}>
        <DatePickerItem
          data={days}
          selectedValue={new Date(getDateAsString(selectedDate).replace(/-/g, "/")).getDate().toString()}
          onSelect={handleDaySelect}
          unit="day"
        />
        <DatePickerItem
          data={months}
          selectedValue={new Date(
            0,
            new Date(getDateAsString(selectedDate).replace(/-/g, "/")).getMonth()
          ).toLocaleDateString(locale, { month: "long" })}
          onSelect={handleMonthSelect}
          unit="month"
        />
        <DatePickerItem
          data={years}
          selectedValue={new Date(getDateAsString(selectedDate).replace(/-/g, "/")).getFullYear().toString()}
          onSelect={handleYearSelect}
          unit="year"
        />
      </div>
      <div className={styles["date-picker-selected-date"]}>
        {/* {selectedDate.toLocaleDateString("en-US", {
          year: "numeric",
          month: "long",
          day: "numeric",
        })} */}
      </div>
    </>
  );
};

export default DatePicker;
