import { FormField } from "@/types";
import { MonthOption } from "@/utils/monthNames";

type DatePartValue = string | undefined;

type DateInputProps = Omit<
  FormField<DatePartValue>,
  "onValid" | "onInvalid"
> & {
  values: (number | string | MonthOption)[];
  onChange: (part: string) => void;
};

function DateInput(props: DateInputProps): JSX.Element {
  const {
    label,
    placeholder,
    name,
    inputClassName,
    value = "",
    values,
    onChange,
  } = props;
  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const selectedValue = e.target.value;
    onChange(selectedValue);
  };
  return (
    <div className={`date-picker__field ${inputClassName ?? ""}`}>
      <h3 className="date-picker__field-label">{label}</h3>
      <select
        name={name}
        id={name}
        required
        onChange={handleChange}
        defaultValue={value}
      >
        <option value="" hidden>
          {placeholder}
        </option>
        {values.map((_value, index) => {
          const optionValue = typeof _value === 'object' ? _value.value : _value;
          const optionLabel = typeof _value === 'object' ? _value.label : _value;
          return (
            <option key={`${optionValue}_${index}`} value={optionValue}>
              {optionLabel}
            </option>
          );
        })}
      </select>
    </div>
  );
}

export default DateInput;
