import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useEffect, useMemo, useRef } from "react";
import styled, { css } from "styled-components";
import { useInputHours } from "../../hooks/useInputHours";
import { formatHours, validateTimeInput } from "../../utils";
import useForkRef from "../../utils/useForkRef";
import { EditableContent } from "../EditableContent";
const StyledEditableContent = styled(EditableContent).withConfig({
  displayName: "EditableHours__StyledEditableContent",
  componentId: "sc-nvi34j-0"
})(["", ""], _ref => {
  let {
    $ticking
  } = _ref;
  return $ticking && css([".presentation{visibility:visible;}input{opacity:0;}"]);
});
export const EditableHours = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
  let {
    value: defaultValue,
    onCancel,
    onSave,
    allowEmptyValue,
    withLeadingZero = true,
    validation = validateTimeInput,
    incrementOnlySelected = false,
    minuteIncrement = 1,
    className,
    onEnterKeyPress: externalEnterKeyPress,
    inputProps: externalInputProps,
    onClick: externalOnClick,
    ticking,
    onFocus,
    ...rest
  } = _ref2;
  const inputRef = useRef(null);
  const handleRef = useForkRef(ref, inputRef);
  const {
    inputProps,
    setCurrentValue,
    setPrevValue
  } = useInputHours({
    value: defaultValue,
    withLeadingZero,
    onSave,
    validation,
    allowEmptyValue,
    onCancel,
    minuteIncrement,
    incrementOnlySelected,
    onEnterKeyPress: externalEnterKeyPress,
    onClick: externalOnClick
  }, inputRef);
  const {
    value,
    onBlur,
    onKeyDown,
    onChange,
    onClick,
    onDoubleClick
  } = inputProps;
  useEffect(() => {
    let _value;
    if (defaultValue !== undefined) {
      _value = formatHours(defaultValue, withLeadingZero);
    }
    setCurrentValue(prevState => {
      if (prevState !== _value) {
        return _value;
      }
      return prevState;
    });
    setPrevValue(prevState => {
      if (prevState !== _value) {
        return _value;
      }
      return prevState;
    });
  }, [defaultValue, setCurrentValue, setPrevValue, withLeadingZero]);
  const splitTime = useMemo(() => {
    if (value && ticking) {
      const [hours, minutes] = value.split(":");
      return {
        hours,
        minutes
      };
    }
  }, [value, ticking]);
  return /*#__PURE__*/React.createElement(StyledEditableContent, _extends({
    ref: handleRef,
    className: className,
    inputProps: {
      ...externalInputProps,
      value,
      onBlur,
      onKeyDown,
      onChange,
      onClick,
      onDoubleClick,
      onFocus,
      type: "text"
    },
    $ticking: ticking
  }, rest), ticking && /*#__PURE__*/React.createElement(React.Fragment, null, splitTime == null ? void 0 : splitTime.hours, /*#__PURE__*/React.createElement("span", {
    className: "tw-animate-ping"
  }, ":"), splitTime == null ? void 0 : splitTime.minutes));
});
EditableHours.displayName = "EditableHours";
//# sourceMappingURL=EditableHours.js.map