'use strict';

var core = require('@linaria/core');
var index = require('../../core/Typo/index.js');
var React = require('react');
var common = require('./common.js');
var DateRangePicker_style = require('./DateRangePicker.style.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

const InputTime = (props) => {
  const { className, value, danger, error, onChange, onBlur } = props;
  const [focus, setFocus] = React.useState(false);
  const [time, setTime] = React.useState(["", "", ""]);
  const hourInputRef = React.useRef(null);
  const minuteInputRef = React.useRef(null);
  const secondInputRef = React.useRef(null);
  const currentTime = value || time;
  function handleChangeHour(event) {
    var _a;
    const hour = common.time2stringByUnit(event.target.value, "h");
    const _time = [...currentTime];
    _time[0] = hour;
    setTime(_time);
    onChange == null ? void 0 : onChange(_time);
    if (_time[0].length === 2) {
      (_a = minuteInputRef.current) == null ? void 0 : _a.focus();
    }
  }
  function handleChangeMinute(event) {
    var _a;
    const minute = common.time2stringByUnit(event.target.value, "m");
    const _time = [...currentTime];
    _time[1] = minute;
    setTime(_time);
    onChange == null ? void 0 : onChange(_time);
    if (_time[1].length === 2) {
      (_a = secondInputRef.current) == null ? void 0 : _a.focus();
    }
  }
  function handleChangeSecond(event) {
    const second = common.time2stringByUnit(event.target.value, "s");
    const _time = [...currentTime];
    _time[2] = second;
    setTime(_time);
    onChange == null ? void 0 : onChange(_time);
  }
  function handleBlurHour(event) {
    const hour = parseInt(event.target.value);
    const _time = [...currentTime];
    if (Number.isInteger(hour)) {
      _time[0] = common.time2stringByUnit(event.target.value, "h");
      setTime(_time);
    }
    onBlur == null ? void 0 : onBlur(_time);
    setFocus(false);
  }
  function handleBlurMinute(event) {
    const minute = parseInt(event.target.value);
    const _time = [...currentTime];
    if (Number.isInteger(minute)) {
      _time[1] = common.time2stringByUnit(event.target.value, "m");
      setTime(_time);
    }
    onBlur == null ? void 0 : onBlur(_time);
    setFocus(false);
  }
  function handleBlurSecond(event) {
    const second = parseInt(event.target.value);
    const _time = [...currentTime];
    if (Number.isInteger(second)) {
      _time[2] = common.time2stringByUnit(event.target.value, "s");
      setTime(_time);
    }
    onBlur == null ? void 0 : onBlur(_time);
    setFocus(false);
  }
  function handleMinuteKeyDown(event) {
    var _a;
    if (event.keyCode === 8 || event.keyCode === 46) {
      if (!event.target.value) {
        (_a = hourInputRef.current) == null ? void 0 : _a.focus();
      }
    }
  }
  function handleSecondKeyDown(event) {
    var _a;
    if (event.keyCode === 8 || event.keyCode === 46) {
      if (!event.target.value) {
        (_a = minuteInputRef.current) == null ? void 0 : _a.focus();
      }
    }
  }
  return /* @__PURE__ */ React__default.default.createElement(DateRangePicker_style.InputTimeStyle.Wrapper, { className }, /* @__PURE__ */ React__default.default.createElement(
    "div",
    {
      className: core.cx(
        "input-time",
        focus && "focus",
        (error || danger) && "error"
      )
    },
    /* @__PURE__ */ React__default.default.createElement(
      "input",
      {
        ref: hourInputRef,
        type: "text",
        className: "hour",
        placeholder: "hh",
        maxLength: 2,
        value: currentTime[0],
        onChange: handleChangeHour,
        onFocus: () => setFocus(true),
        onBlur: handleBlurHour
      }
    ),
    /* @__PURE__ */ React__default.default.createElement("span", { className: core.cx("connect-symbol", !!currentTime[0] && "inputted") }, ":"),
    /* @__PURE__ */ React__default.default.createElement(
      "input",
      {
        ref: minuteInputRef,
        type: "text",
        className: "minute",
        placeholder: "mm",
        maxLength: 2,
        value: currentTime[1],
        onChange: handleChangeMinute,
        onFocus: () => setFocus(true),
        onBlur: handleBlurMinute,
        onKeyDown: handleMinuteKeyDown
      }
    ),
    /* @__PURE__ */ React__default.default.createElement("span", { className: core.cx("connect-symbol", !!currentTime[1] && "inputted") }, ":"),
    /* @__PURE__ */ React__default.default.createElement(
      "input",
      {
        ref: secondInputRef,
        type: "text",
        className: "second",
        placeholder: "ss",
        maxLength: 2,
        value: currentTime[2],
        onChange: handleChangeSecond,
        onFocus: () => setFocus(true),
        onBlur: handleBlurSecond,
        onKeyDown: handleSecondKeyDown
      }
    )
  ), error ? /* @__PURE__ */ React__default.default.createElement("p", { className: core.cx("error-message", index.Typo.Label.l4_regular) }, error) : null);
};
var InputTime$1 = InputTime;

module.exports = InputTime$1;
