import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useCallback, useEffect, useState } from "react";
import classNames from "classnames";
import nlp from "compromise";
import plg from "compromise-dates";
import moment from "moment";
import styled from "styled-components";
import { isValidTime } from "../../utils/timeUtils";
import { ComboBox } from "../ComboBox/ComboBox";
nlp.plugin(plg);
export const StyledInputTimeWrapper = styled.div.withConfig({
  displayName: "InputTime__StyledInputTimeWrapper",
  componentId: "sc-71akdh-0"
})(["max-width:176px;flex:1;& .c-combo-box--list{min-width:176px;}"]);
const renderOption = option => {
  return /*#__PURE__*/React.createElement("div", {
    id: option.id
  }, option.name);
};
export const InputTime = _ref => {
  let {
    mode = "24",
    selected: defaultSelected,
    min = "00:00",
    max = "23:45",
    onChange,
    step = 15,
    size,
    className,
    placeholder,
    triggerMode,
    disabled,
    invalid,
    ...rest
  } = _ref;
  const [isOpen, setIsOpen] = useState(false);
  const generateTimeOptions = () => {
    const minTime = moment(isValidTime(min) ? min : "00:00", "HH:mm");
    const maxTime = moment(isValidTime(max) ? max : "23:45", "HH:mm");
    const allOptions = [];
    const currentTime = moment("00:00", "HH:mm");
    while (currentTime.isBefore(moment("24:00", "HH:mm"))) {
      allOptions.push({
        id: currentTime.format("HH:mm"),
        name: currentTime.format(mode === "12" ? "hh:mm A" : "HH:mm")
      });
      currentTime.add(step, "minutes");
    }
    return allOptions.filter(option => moment(option.id, "HH:mm").isSameOrAfter(minTime) && moment(option.id, "HH:mm").isSameOrBefore(maxTime));
  };
  const timeOptions = generateTimeOptions();
  const isValidDefaultSelected = defaultSelected ? timeOptions.some(opt => opt.id === defaultSelected) : false;
  const [selected, setSelected] = useState(isValidDefaultSelected ? defaultSelected : undefined);
  const handleInputChange = useCallback(text => {
    if (/\d{1,2}:\d{2}/.test(text.trim())) {
      return;
    }
    const doc = nlp(text);
    const parsed = doc.times().get()[0];
    if (parsed && parsed["24h"] && parsed["24h"] !== selected) {
      const value = moment(parsed).format("HH:mm");
      if (timeOptions.some(option => option.id === value)) {
        setSelected(value);
        onChange == null || onChange(value);
        setIsOpen(false);
      }
    }
  }, [onChange, selected, timeOptions]);
  const handleChange = e => {
    setSelected(e);
    onChange == null || onChange(e);
  };
  const handleOpen = () => {
    setIsOpen(true);
  };
  const handleClose = () => {
    setIsOpen(false);
  };
  useEffect(() => {
    if (isOpen && selected) {
      var _document$getElementB;
      const selectedItem = (_document$getElementB = document.getElementById(selected)) == null ? void 0 : _document$getElementB.parentElement;
      selectedItem == null || selectedItem.scrollIntoView({
        behavior: "smooth",
        block: "center"
      });
    }
  }, [isOpen, selected]);
  useEffect(() => {
    if (defaultSelected !== selected && timeOptions.some(opt => opt.id === defaultSelected)) setSelected(defaultSelected);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [defaultSelected, timeOptions]);
  return /*#__PURE__*/React.createElement(StyledInputTimeWrapper, {
    className: classNames("c-input-time", className)
  }, /*#__PURE__*/React.createElement(ComboBox, _extends({}, rest, {
    options: timeOptions,
    open: isOpen,
    disabledInternalSort: true,
    selected: selected,
    keepSameOptionsOrder: true,
    onInputChange: handleInputChange,
    onChange: handleChange,
    forceCloseMenu: true,
    placeholder: placeholder,
    renderOption: renderOption,
    autoHeightMax: 226,
    size: size,
    onClose: handleClose,
    onOpen: handleOpen,
    triggerMode: triggerMode,
    disabled: disabled,
    invalid: invalid
  })));
};
//# sourceMappingURL=InputTime.js.map