import React, { useMemo, useEffect } from "react";
import VirtualKeyboard from "../index";
import "./index.less";
import { formatStringToTime } from "./utils";
import { getText } from "../../../locales";
import dayjs from "dayjs";
var items = [{
  value: 1,
  label: "1",
  disabled: false,
  type: "text"
}, {
  value: 2,
  label: "2",
  disabled: false,
  type: "text"
}, {
  value: 3,
  label: "3",
  disabled: false,
  type: "text"
}, {
  value: 4,
  label: "4",
  disabled: false,
  type: "text"
}, {
  value: 5,
  label: "5",
  disabled: false,
  type: "text"
}, {
  value: 6,
  label: "6",
  disabled: false,
  type: "text"
}, {
  value: 7,
  label: "7",
  disabled: false,
  type: "text"
}, {
  value: 8,
  label: "8",
  disabled: false,
  type: "text"
}, {
  value: 9,
  label: "9",
  disabled: false,
  type: "text"
}, {
  value: "now",
  label: getText("virtual-keyboard-time-now"),
  disabled: false,
  type: "text",
  style: {
    color: "#7f56d9"
  }
}, {
  value: "0",
  label: "0",
  disabled: false,
  type: "text"
}, {
  value: "ok",
  label: getText("virtual-keyboard-time-ok"),
  disabled: false,
  type: "primary"
}];
var VirtualKeyboardTime = function VirtualKeyboardTime(props) {
  var _onChange2 = props.onChange,
    onEnter = props.onEnter,
    style = props.style,
    className = props.className,
    _props$value = props.value,
    value = _props$value === void 0 ? "" : _props$value,
    rightPanel = props.rightPanel;
  useEffect(function () {
    document.body.id = "body";
  }, []);
  var res = useMemo(function () {
    return formatStringToTime(value);
  }, [value]);
  var _onChange = function _onChange(current) {
    if (current === "ok") {
      onEnter === null || onEnter === void 0 || onEnter(formatStringToTime(value));
      return;
    }
    if (current === "now") {
      onEnter === null || onEnter === void 0 || onEnter(dayjs().format("HH:mm"));
      return;
    }
    var _val = res.valueString + current;
    if (res.valueString.length === 4) {
      _val = current + "";
    }
    if (document.querySelector(".virtual-keyboard-input-select")) {
      _val = current + "";
    }
    _onChange2 === null || _onChange2 === void 0 || _onChange2(formatStringToTime(_val));
  };
  return /*#__PURE__*/React.createElement(VirtualKeyboard, {
    className: className,
    style: style,
    keyboardProps: {
      items: items,
      onChange: function onChange(current) {
        _onChange(current);
      }
    },
    virtualKeyInputProps: {
      value: value,
      onChange: function onChange(e) {
        _onChange2 === null || _onChange2 === void 0 || _onChange2(formatStringToTime(e.target.value));
      },
      renderInput: function renderInput() {
        return res === null || res === void 0 ? void 0 : res.previewValueArrayDom;
      }
    },
    rightPanel: rightPanel
  });
};
export default VirtualKeyboardTime;