"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.NumberKeyboard = void 0;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _antdMobileIcons = require("antd-mobile-icons");
var _withDefaultProps = require("../../utils/with-default-props");
var _shuffle = require("../../utils/shuffle");
var _popup = _interopRequireDefault(require("../popup"));
var _nativeProps = require("../../utils/native-props");
var _safeArea = _interopRequireDefault(require("../safe-area"));
var _ahooks = require("ahooks");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
const classPrefix = 'adm-number-keyboard';
const defaultProps = {
  defaultVisible: false,
  randomOrder: false,
  showCloseButton: true,
  confirmText: null,
  closeOnConfirm: true,
  safeArea: true,
  destroyOnClose: false,
  forceRender: false
};
const NumberKeyboard = p => {
  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
  const {
    visible,
    title,
    getContainer,
    confirmText,
    customKey,
    randomOrder,
    showCloseButton,
    onInput
  } = props;
  const keyboardRef = (0, _react.useRef)(null);
  const keys = (0, _react.useMemo)(() => {
    const defaultKeys = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
    const keyList = randomOrder ? (0, _shuffle.shuffle)(defaultKeys) : defaultKeys;
    const customKeys = Array.isArray(customKey) ? customKey : [customKey];
    keyList.push('0');
    if (confirmText) {
      if (customKeys.length === 2) {
        keyList.splice(9, 0, customKeys.pop());
      }
      keyList.push(customKeys[0] || '');
    } else {
      keyList.splice(9, 0, customKeys[0] || '');
      keyList.push(customKeys[1] || 'BACKSPACE');
    }
    return keyList;
  }, [customKey, confirmText, randomOrder, randomOrder && visible]);
  const timeoutRef = (0, _react.useRef)(-1);
  const intervalRef = (0, _react.useRef)(-1);
  const onDelete = (0, _ahooks.useMemoizedFn)(() => {
    var _a;
    (_a = props.onDelete) === null || _a === void 0 ? void 0 : _a.call(props);
  });
  const onBackspacePressStart = () => {
    timeoutRef.current = window.setTimeout(() => {
      onDelete();
      intervalRef.current = window.setInterval(onDelete, 150);
    }, 700);
  };
  const onBackspacePressEnd = () => {
    clearTimeout(timeoutRef.current);
    clearInterval(intervalRef.current);
  };
  const onKeyPress = (e, key) => {
    var _a, _b;
    e.preventDefault();
    switch (key) {
      case 'BACKSPACE':
        onDelete === null || onDelete === void 0 ? void 0 : onDelete();
        break;
      case 'OK':
        (_a = props.onConfirm) === null || _a === void 0 ? void 0 : _a.call(props);
        if (props.closeOnConfirm) {
          (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
        }
        break;
      default:
        // onInput should't be called when customKey doesn't exist
        if (key !== '') onInput === null || onInput === void 0 ? void 0 : onInput(key);
        break;
    }
  };
  const renderHeader = () => {
    if (!showCloseButton && !title) return null;
    return _react.default.createElement("div", {
      className: (0, _classnames.default)(`${classPrefix}-header`, {
        [`${classPrefix}-header-with-title`]: !!title
      })
    }, !!title && _react.default.createElement("div", {
      className: `${classPrefix}-title`,
      "aria-label": title
    }, title), showCloseButton && _react.default.createElement("span", {
      className: `${classPrefix}-header-close-button`,
      onClick: () => {
        var _a;
        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
      },
      role: 'grid',
      title: 'CLOSE',
      tabIndex: -1
    }, _react.default.createElement(_antdMobileIcons.DownOutline, null)));
  };
  const renderKey = (key, index) => {
    const isNumberKey = /^\d$/.test(key);
    const className = (0, _classnames.default)(`${classPrefix}-key`, {
      [`${classPrefix}-key-number`]: isNumberKey,
      [`${classPrefix}-key-sign`]: !isNumberKey && key,
      [`${classPrefix}-key-mid`]: index === 9 && !!confirmText && keys.length < 12
    });
    const ariaProps = key ? {
      role: 'grid',
      title: key,
      tabIndex: -1
    } : undefined;
    return _react.default.createElement("div", Object.assign({
      key: key,
      className: className,
      onTouchStart: () => {
        if (key === 'BACKSPACE') {
          onBackspacePressStart();
        }
      },
      onTouchEnd: e => {
        onKeyPress(e, key);
        if (key === 'BACKSPACE') {
          onBackspacePressEnd();
        }
      }
    }, ariaProps), key === 'BACKSPACE' ? _react.default.createElement(_antdMobileIcons.TextDeletionOutline, null) : key);
  };
  return _react.default.createElement(_popup.default, {
    visible: visible,
    getContainer: getContainer,
    mask: false,
    afterClose: props.afterClose,
    afterShow: props.afterShow,
    className: `${classPrefix}-popup`,
    stopPropagation: props.stopPropagation,
    destroyOnClose: props.destroyOnClose,
    forceRender: props.forceRender
  }, (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
    ref: keyboardRef,
    className: classPrefix,
    onMouseDown: e => {
      e.preventDefault();
    }
  }, renderHeader(), _react.default.createElement("div", {
    className: `${classPrefix}-wrapper`
  }, _react.default.createElement("div", {
    className: (0, _classnames.default)(`${classPrefix}-main`, {
      [`${classPrefix}-main-confirmed-style`]: !!confirmText
    })
  }, keys.map(renderKey)), !!confirmText && _react.default.createElement("div", {
    className: `${classPrefix}-confirm`
  }, _react.default.createElement("div", {
    className: `${classPrefix}-key ${classPrefix}-key-extra ${classPrefix}-key-bs`,
    onTouchStart: () => {
      onBackspacePressStart();
    },
    onTouchEnd: e => {
      onKeyPress(e, 'BACKSPACE');
      onBackspacePressEnd();
    },
    onContextMenu: e => {
      // Long press should not trigger native context menu
      e.preventDefault();
    },
    title: 'BACKSPACE',
    role: 'grid',
    tabIndex: -1
  }, _react.default.createElement(_antdMobileIcons.TextDeletionOutline, null)), _react.default.createElement("div", {
    className: `${classPrefix}-key ${classPrefix}-key-extra ${classPrefix}-key-ok`,
    onTouchEnd: e => onKeyPress(e, 'OK'),
    role: 'grid',
    tabIndex: -1,
    "aria-label": confirmText
  }, confirmText))), props.safeArea && _react.default.createElement("div", {
    className: `${classPrefix}-footer`
  }, _react.default.createElement(_safeArea.default, {
    position: 'bottom'
  })))));
};
exports.NumberKeyboard = NumberKeyboard;