"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _react = _interopRequireWildcard(require("react"));

var _moment = _interopRequireDefault(require("moment"));

var _Input = _interopRequireDefault(require("../../components/Input"));

var _Popover = _interopRequireDefault(require("../../components/Popover"));

var _Box = _interopRequireDefault(require("../../components/Box"));

var _Button = _interopRequireDefault(require("../../components/Button"));

var _SvgIcon = _interopRequireDefault(require("../../components/SvgIcon"));

var _useLocale = _interopRequireDefault(require("../../components/LocaleProvider/useLocale"));

var _globalAnimation = require("../../style/globalAnimation");

var _useUncontrolled3 = _interopRequireDefault(require("../../hooks/useUncontrolled"));

var _usePopoverConfig = _interopRequireDefault(require("../../hooks/usePopoverConfig"));

var _style = require("./style");

var _Time = _interopRequireDefault(require("./Time"));

var _zh_CN = _interopRequireDefault(require("./locale/zh_CN"));

var _this = void 0;

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var FooterWithoutMemo = function FooterWithoutMemo(_ref) {
  (0, _newArrowCheck2.default)(this, _this);
  var onConfirm = _ref.onConfirm,
      disabled = _ref.disabled,
      _locale = _ref.locale;
  var locale = (0, _useLocale.default)(_zh_CN.default, 'DatePicker', _locale);
  return /*#__PURE__*/_react.default.createElement(_Box.default, {
    className: _style.footerCls,
    container: true,
    justifyContent: "space-between",
    alignItems: "center"
  }, /*#__PURE__*/_react.default.createElement("span", null), /*#__PURE__*/_react.default.createElement(_Button.default, {
    styleType: "primary",
    onClick: onConfirm,
    disabled: disabled
  }, locale.confirm));
}.bind(void 0);

var Footer = /*#__PURE__*/(0, _react.memo)(FooterWithoutMemo);

var inputToTime = function inputToTime(v, format) {
  (0, _newArrowCheck2.default)(this, _this);
  if (v == '') return null;
  v = v.replace(/：/g, ':').trim();
  return (0, _moment.default)(v, format.trim(), true);
}.bind(void 0);

var timeToInput = function timeToInput(v, format) {
  (0, _newArrowCheck2.default)(this, _this);
  if (v == null) return '';
  return (0, _moment.default)(+v).format(format);
}.bind(void 0);

var formatToTimeMode = function formatToTimeMode(format) {
  (0, _newArrowCheck2.default)(this, _this);
  var timeMode = [];
  if (format.indexOf('H') >= 0) timeMode.push('HH');
  if (format.indexOf('m') >= 0) timeMode.push('mm');
  if (format.indexOf('s') >= 0) timeMode.push('ss');
  return timeMode;
}.bind(void 0);

var DefaultFormat = 'HH:mm:ss';

var TimePicker = function TimePicker(_ref2) {
  var _this2 = this;

  (0, _newArrowCheck2.default)(this, _this);

  var _value = _ref2.value,
      defaultValue = _ref2.defaultValue,
      _onChange = _ref2.onChange,
      _ref2$format = _ref2.format,
      _format = _ref2$format === void 0 ? DefaultFormat : _ref2$format,
      nullable = _ref2.nullable,
      size = _ref2.size,
      disabled = _ref2.disabled,
      popoverProps = _ref2.popoverProps,
      locale = _ref2.locale;

  var _useUncontrolled = (0, _useUncontrolled3.default)(_value, defaultValue, _onChange),
      _useUncontrolled2 = (0, _slicedToArray2.default)(_useUncontrolled, 2),
      value = _useUncontrolled2[0],
      onChange = _useUncontrolled2[1];

  var _useState = (0, _react.useState)(''),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      inputValue = _useState2[0],
      setInputValue = _useState2[1];

  var _useState3 = (0, _react.useState)(value),
      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
      timeValue = _useState4[0],
      setTimeValue = _useState4[1];

  var _useState5 = (0, _react.useState)(true),
      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
      useInputValue = _useState6[0],
      setUseInputValue = _useState6[1];

  var _useState7 = (0, _react.useState)(false),
      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
      visible = _useState8[0],
      setVisible = _useState8[1];

  var _useState9 = (0, _react.useState)(false),
      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
      active = _useState10[0],
      setActive = _useState10[1];

  var defaultTime = (0, _react.useMemo)(function () {
    (0, _newArrowCheck2.default)(this, _this2);
    return (0, _moment.default)().startOf('date');
  }.bind(this), []);
  var avoidBlur = (0, _react.useCallback)(function (e) {
    (0, _newArrowCheck2.default)(this, _this2);
    return e.preventDefault();
  }.bind(this), []);
  var format = _format || DefaultFormat;
  var handleConfirm = (0, _react.useCallback)(function () {
    (0, _newArrowCheck2.default)(this, _this2);
    setVisible(false);
    var finalValue = timeValue;

    if (useInputValue) {
      var inputTime = inputToTime(inputValue, format);

      if (inputTime) {
        finalValue = inputTime;
        if (inputTime.isValid()) return;
      } else {
        finalValue = null;
      }
    }

    if (finalValue == null && !nullable) return;
    onChange(finalValue == null ? null : (0, _moment.default)(+finalValue));
  }.bind(this), [format, inputValue, nullable, onChange, timeValue, useInputValue]);
  var handleInputChange = (0, _react.useCallback)(function (e) {
    (0, _newArrowCheck2.default)(this, _this2);
    var s = e.target.value;
    setInputValue(s);
    var inputTime = inputToTime(s, format);
    if (inputTime && inputTime.isValid()) setTimeValue(inputTime);
    setUseInputValue(true);
  }.bind(this), [format]);
  var handleTimeChange = (0, _react.useCallback)(function (v) {
    (0, _newArrowCheck2.default)(this, _this2);
    setTimeValue(v);
    setInputValue(timeToInput(v, format));
    setUseInputValue(false);
  }.bind(this), [format]);
  var handleInputFocus = (0, _react.useCallback)(function () {
    (0, _newArrowCheck2.default)(this, _this2);
    return setActive(true);
  }.bind(this), []);
  var handleInputBlur = (0, _react.useCallback)(function () {
    (0, _newArrowCheck2.default)(this, _this2);
    return setActive(false);
  }.bind(this), []);
  var formatTimeValue = (0, _react.useMemo)(function () {
    (0, _newArrowCheck2.default)(this, _this2);
    return new Date(+(timeValue == null ? defaultTime : timeValue));
  }.bind(this), [defaultTime, timeValue]);
  var isValid = (0, _react.useMemo)(function () {
    (0, _newArrowCheck2.default)(this, _this2);

    if (useInputValue) {
      var inputTime = inputToTime(inputValue, format);
      if (inputTime) return inputTime.isValid();
      return nullable;
    }

    return true;
  }.bind(this), [format, inputValue, nullable, useInputValue]);
  var timeMode = (0, _react.useMemo)(function () {
    (0, _newArrowCheck2.default)(this, _this2);
    return formatToTimeMode(format);
  }.bind(this), [format]);
  var popoverConfigProps = (0, _usePopoverConfig.default)();
  (0, _react.useEffect)(function () {
    (0, _newArrowCheck2.default)(this, _this2);

    if (!active) {
      setTimeValue(value);
      setInputValue(value == null ? nullable ? '' : timeToInput(defaultTime, format) : timeToInput(value, format));
    }
  }.bind(this), [active, defaultTime, format, nullable, value]);
  return /*#__PURE__*/_react.default.createElement(_Popover.default, (0, _extends2.default)({
    transitionName: "".concat(_globalAnimation.animationPrefixCls, "-fade")
  }, popoverConfigProps, popoverProps, {
    trigger: [],
    showAction: ['click', 'focus'],
    hideAction: ['blur'],
    visible: visible,
    onVisibleChange: setVisible,
    popup: /*#__PURE__*/_react.default.createElement(_style.SPopup, {
      onMouseDown: avoidBlur
    }, /*#__PURE__*/_react.default.createElement(_Time.default, {
      value: formatTimeValue,
      onChange: handleTimeChange,
      mode: timeMode
    }), /*#__PURE__*/_react.default.createElement(Footer, {
      onConfirm: handleConfirm,
      disabled: !isValid,
      locale: locale
    }))
  }), /*#__PURE__*/_react.default.createElement(_style.SWrap, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
    value: inputValue,
    onChange: handleInputChange,
    onBlur: handleInputBlur,
    onFocus: handleInputFocus,
    size: size,
    disabled: disabled,
    prefix: /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
      type: "clock"
    })
  })));
}.bind(void 0);

TimePicker.propTypes = {
  onChange: _propTypes.default.func,
  popoverProps: _propTypes.default.any,
  nullable: _propTypes.default.bool,
  format: _propTypes.default.string,
  disabled: _propTypes.default.bool,
  locale: _propTypes.default.any
};

var _default = /*#__PURE__*/(0, _react.memo)(TimePicker);

exports.default = _default;