type FpTypes = {
  amPM?: { style: { display: string } };
  selectedDates: string | any[];
  setDate: (arg0: any, arg1: boolean) => void;
  input: { id: any };
  timeContainer?: {
    classList: { add: (arg0: string) => void };
    prepend: (arg0: HTMLDivElement) => void;
    append: (arg0: HTMLDivElement) => void;
  };
  minuteElement?: { step: string };
  _initialDate: {
    toLocaleDateString: (
      arg0: string,
      arg1: { day: string; timeZoneName: string }
    ) => string | any[];
  };
  loadedPlugins: string[];
};

export const getTimezoneText = (inputDate: {
  toLocaleDateString: (
    arg0: string,
    arg1: { day: string; timeZoneName: string }
  ) => string | any[];
}) => {
  const tzAbbr = inputDate
    .toLocaleDateString("en-US", {
      day: "2-digit",
      timeZoneName: "short",
    })
    .slice(4);
  const tzText = inputDate
    .toLocaleDateString("en-US", {
      day: "2-digit",
      timeZoneName: "long",
    })
    .slice(4);
  return `${tzAbbr} (${tzText})`;
};

function timeSelectPlugin(props: { caption: string; showTimezone: boolean }) {
  return function (fp: FpTypes) {
    // const generateMeridiemCard = (text: string) => {
    //   const selectableCard = document.createElement("div");
    //   selectableCard.className = "pb_selectable_card_kit_enabled";

    //   const cardInput = document.createElement("input"),
    //     cardInputId = `datePicker${text}`;

    //   cardInput.id = cardInputId;
    //   cardInput.name = "datepicker-ampm";
    //   cardInput.type = "radio";
    //   cardInput.value = text;

    //   const cardLabel = document.createElement("label"),
    //     cardLabelBuffer = document.createElement("div");
    //   cardLabel.className = `label-${text.toLowerCase()}`;
    //   cardLabel.setAttribute("for", cardInputId);
    //   cardLabelBuffer.className = "buffer";
    //   cardLabelBuffer.innerHTML = text;

    //   cardLabel.append(cardLabelBuffer);
    //   selectableCard.prepend(cardInput);
    //   selectableCard.append(cardLabel);

    //   return selectableCard;
    // };

    // const generateMeridiemToggle = () => {
    //   fp.amPM.style.display = "none";
    //   const formGroupKit = document.createElement("div");
    //   formGroupKit.className = "pb_form_group_kit";

    //   const amCard = generateMeridiemCard("AM");
    //   amCard.addEventListener("click", () => {
    //     fp.selectedDates[0].setHours(
    //       (fp.selectedDates[0].getHours() % 12) + 12 * 0
    //     );
    //     fp.setDate(fp.selectedDates[0], true);
    //   });

    //   const pmCard = generateMeridiemCard("PM");
    //   pmCard.addEventListener("click", () => {
    //     fp.selectedDates[0].setHours(
    //       (fp.selectedDates[0].getHours() % 12) + 12 * 1
    //     );
    //     fp.setDate(fp.selectedDates[0], true);
    //   });

    //   formGroupKit.prepend(amCard);
    //   formGroupKit.append(pmCard);

    //   const meridiemContainer = document.createElement("div");
    //   meridiemContainer.className = "meridiem";
    //   meridiemContainer.append(formGroupKit);
    //   document.querySelector(".pb_time_selection").append(meridiemContainer);
    // };

    // const getMeridiem = (dateObj: string | any[]) => {
    //   return dateObj[0].getHours() < 12 ? "AM" : "PM";
    // };

    // const updateMeridiemToggle = (forceClick: boolean) => {
    //   if (!fp.selectedDates.length) return;

    //   const uncheckedClass = "pb_selectable_card_kit_enabled",
    //     checkedClass = "pb_selectable_card_kit_checked_enabled",
    //     pickerAM: HTMLElement & { [x: string]: any } =
    //       document.getElementById("datePickerAM"),
    //     pickerPM: HTMLElement & { [x: string]: any } =
    //       document.getElementById("datePickerPM"),
    //     meridiem = getMeridiem(fp.selectedDates);

    //   if (forceClick) {
    //     pickerAM.checked = false;
    //     pickerPM.checked = false;
    //     pickerPM.checked = meridiem === "PM";
    //     pickerAM.checked = meridiem === "AM";
    //   }

    //   if (meridiem === "PM") {
    //     pickerPM.parentElement.className = checkedClass;
    //     pickerAM.parentElement.className = uncheckedClass;
    //   } else if (meridiem === "AM") {
    //     pickerAM.parentElement.className = checkedClass;
    //     pickerPM.parentElement.className = uncheckedClass;
    //   }
    // };

    return {
      onValueUpdate() {
        // updateMeridiemToggle(true);
      },
      onReady() {
        const id = fp.input.id;

        if (!id || !fp?.timeContainer) return;

        fp.timeContainer.classList.add("pb_time_selection");

        // allow single minutes
        fp.minuteElement.step = "1";

        // add caption text
        if (props.caption) {
          const captionContainer = document.createElement("div");
          captionContainer.className = "pb_caption_kit_md";
          captionContainer.innerHTML = props?.caption;
          fp.timeContainer.prepend(captionContainer);
        }

        // add meridiem toggle
        // generateMeridiemToggle();
        // updateMeridiemToggle(true);

        // add timezone text
        if (props.showTimezone) {
          const subcaptionContainer = document.createElement("div");
          subcaptionContainer.className = "pb_caption_kit_xs";
          subcaptionContainer.innerHTML = getTimezoneText(fp._initialDate);
          fp.timeContainer.append(subcaptionContainer);
        }

        fp.loadedPlugins.push("timeSelectPlugin");
      },
    };
  };
}

export default timeSelectPlugin;