import { cx } from '@linaria/core';
import { Typo } from '../../core/Typo/index.js';
import React__default, { useState, useRef } from 'react';
import { time2stringByUnit } from './common.js';
import { InputTimeStyle } from './DateRangePicker.style.js';

const InputTime = (props) => {
  const { className, value, danger, error, onChange, onBlur } = props;
  const [focus, setFocus] = useState(false);
  const [time, setTime] = useState(["", "", ""]);
  const hourInputRef = useRef(null);
  const minuteInputRef = useRef(null);
  const secondInputRef = useRef(null);
  const currentTime = value || time;
  function handleChangeHour(event) {
    var _a;
    const hour = 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 = 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 = 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] = 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] = 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] = 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.createElement(InputTimeStyle.Wrapper, { className }, /* @__PURE__ */ React__default.createElement(
    "div",
    {
      className: cx(
        "input-time",
        focus && "focus",
        (error || danger) && "error"
      )
    },
    /* @__PURE__ */ React__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.createElement("span", { className: cx("connect-symbol", !!currentTime[0] && "inputted") }, ":"),
    /* @__PURE__ */ React__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.createElement("span", { className: cx("connect-symbol", !!currentTime[1] && "inputted") }, ":"),
    /* @__PURE__ */ React__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.createElement("p", { className: cx("error-message", Typo.Label.l4_regular) }, error) : null);
};
var InputTime$1 = InputTime;

export { InputTime$1 as default };
