import type { SelectHTMLAttributes } from "react";
import type { ClassNames } from "react-day-picker";
import { useDayPicker } from "react-day-picker";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "../select";

const Dropdown = (
  props: {
    classNames: ClassNames;
    options?: {
      value: number;
      label: string;
      disabled: boolean;
    }[];
  } & Omit<SelectHTMLAttributes<HTMLSelectElement>, "children">,
) => {
  const { options, classNames, ...selectProps } = props;
  const dayPickerContext = useDayPicker();

  let selectedValue = selectProps.value;

  if (dayPickerContext.months) {
    if (selectProps.name === "month") {
      selectedValue = dayPickerContext.months[0].date.getMonth();
    } else if (selectProps.name === "year") {
      selectedValue = dayPickerContext.months[0].date.getFullYear();
    }
  }

  const selectedOption = options?.find(({ value }) => value === selectedValue);

  return (
    <Select
      value={String(selectedValue)}
      onValueChange={(value) => {
        const event = {
          target: { value: Number(value) },
        } as unknown as React.ChangeEvent<HTMLSelectElement>;
        selectProps.onChange?.(event);
      }}
    >
      <SelectTrigger className="w-max max-w-max border-0">
        <SelectValue placeholder={selectedOption?.label} />
      </SelectTrigger>
      <SelectContent>
        {options?.map(({ value, label, disabled }) => (
          <SelectItem key={value} value={String(value)} disabled={disabled}>
            {label}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
};

export default Dropdown;