import { useRef, type ChangeEventHandler } from "react";

import { BookingIcon } from "@/components/booking/BookingIcons";
import { isoToDatePickerDisplay } from "@/lib/booking-search";

type Props = {
  "aria-label": string;
  value: string;
  invalid?: boolean;
  onChange: ChangeEventHandler<HTMLInputElement>;
};

function openDatePicker(input: HTMLInputElement | null) {
  if (!input) return;
  input.focus();
  if (typeof input.showPicker === "function") {
    try {
      input.showPicker();
    } catch {
      input.click();
    }
  } else {
    input.click();
  }
}

export function BookingDateControl({ "aria-label": ariaLabel, value, invalid = false, onChange }: Props) {
  const inputRef = useRef<HTMLInputElement>(null);
  const display = isoToDatePickerDisplay(value);

  return (
    <div
      className={`ferry-booking__control ferry-booking__control--date${invalid ? " is-invalid" : ""}`}
      role="presentation"
      onClick={() => openDatePicker(inputRef.current)}
      onKeyDown={(e) => {
        if (e.key === "Enter" || e.key === " ") {
          e.preventDefault();
          openDatePicker(inputRef.current);
        }
      }}
    >
      <span className="ferry-booking__control-addon" aria-hidden>
        <BookingIcon name="calendar" />
      </span>
      <div className="ferry-booking__control-body">
        <span className="ferry-booking__date-display" aria-hidden>
          {display || "dd/mm/yyyy"}
        </span>
        <input
          ref={inputRef}
          aria-label={ariaLabel}
          className="ferry-booking__date-input-native"
          type="date"
          tabIndex={-1}
          value={value}
          onChange={onChange}
        />
      </div>
    </div>
  );
}