"use client";

import React from "react";
import { useStatic } from "../../../utils/hooks";
import DatePickerStatic from "./DatePicker.static";

// Type definitions for daypickr config
interface DayPickrWeekday {
  name: string;
  shortname: string;
}

interface DayPickrL10n {
  prevMonth: string;
  nextMonth: string;
  month: string;
  year: string;
  weekdays: DayPickrWeekday[];
  months: string[];
  openButton: string;
  closeButton: string;
}

interface DayPickrClasses {
  wrapper?: string;
  header?: string;
  select?: string;
  selectDisplay?: string;
  monthSelect?: string;
  yearSelect?: string;
  button?: string;
  paginationButton?: string;
  nextMonthButton?: string;
  prevMonthButton?: string;
  yearMonthWrapper?: string;
  pagination?: string;
  table?: string;
  tableRow?: string;
  tableCell?: string;
  tableHeaderRow?: string;
  tableHeaderCell?: string;
  dayButton?: string;
  isToday?: string;
  isSelected?: string;
  srOnly?: string;
  input?: string;
  closeButton?: string;
  toggleButton?: string;
}

interface DayPickrIcon {
  type: string;
  xmlns?: string;
  viewBox?: string;
  className?: string;
  children?: Array<{
    type: string;
    d?: string;
    "fill-rule"?: string;
  }>;
}

// Main daypickr config interface - only including the most commonly used options
// Full config reference: https://github.com/lightingbeetle/daypickr/
export interface DayPickrConfig {
  locale?: string;
  classes?: DayPickrClasses;
  firstDayOfWeek?: number;
  l10n?: Partial<DayPickrL10n>;
  parseDate?: (date: string) => Date | false;
  calendarIcon?: DayPickrIcon;
  disabledDayFn?: (date: Date) => boolean;
  // Add other commonly used options as needed
}

export interface DatePickerProps {
  /**
   * daypickr config object
   * @see https://github.com/lightingbeetle/daypickr/
   * Only the most common options are typed, but you can pass any valid daypickr config
   */
  dayPickrConfig?: DayPickrConfig;

  /**
   * All days except ones in array will be disabled
   * Use YYYY-MM-DD format
   */
  enabledDays?: string[];

  /**
   * ID of both visible ({id}-input) and hidden ({id}-value) input elements
   */
  id?: string;

  /**
   * Name of the hidden input element that contains date value
   */
  name?: string;
}

const DatePicker: React.FC<DatePickerProps> = ({
  dayPickrConfig,
  enabledDays,
  id,
  name,
}) => {
  const [elementRef] = useStatic(DatePickerStatic, dayPickrConfig);

  return (
    <div
      ref={elementRef}
      data-datepicker
      data-enabled-days={(enabledDays && enabledDays.toString()) || undefined}
      className="datepicker control-group"
      data-datepicker-id={id}
      data-datepicker-name={name}
    />
  );
};

DatePicker.displayName = "DatePicker";

export { DatePicker };