var _excluded = ["className", "style"];

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React, { useContext, useMemo, useRef } from 'react';
import cls from 'clsx';
import { CSSTransition } from 'react-transition-group';
import { getZIndexStyle, noop, stopPropagation } from '../utils';
import NumberKeyboardKey from './NumberKeyboardKey';
import { useUpdateEffect } from '../hooks';
import useClickAway from '../hooks/use-click-away';
import ConfigProviderContext from '../config-provider/ConfigProviderContext';

var NumberKeyboard = function NumberKeyboard(_ref) {
  var className = _ref.className,
      style = _ref.style,
      props = _objectWithoutPropertiesLoose(_ref, _excluded);

  var _useContext = useContext(ConfigProviderContext),
      prefixCls = _useContext.prefixCls,
      createNamespace = _useContext.createNamespace;

  var _createNamespace = createNamespace('number-keyboard', prefixCls),
      bem = _createNamespace[0];

  var root = useRef();

  var genBasicKeys = function genBasicKeys() {
    var keys = Array(9).fill('').map(function (_, i) {
      return {
        text: i + 1
      };
    });

    if (props.randomKeyOrder) {
      keys.sort(function () {
        return Math.random() > 0.5 ? 1 : -1;
      });
    }

    return keys;
  };

  var genDefaultKeys = function genDefaultKeys() {
    return [].concat(genBasicKeys(), [{
      text: props.extraKey,
      type: 'extra'
    }, {
      text: 0
    }, {
      text: props.showDeleteKey ? props.deleteButtonText : '',
      type: props.showDeleteKey ? 'delete' : ''
    }]);
  };

  var genCustomKeys = function genCustomKeys() {
    var keys = genBasicKeys();
    var extraKey = props.extraKey;
    var extraKeys = Array.isArray(extraKey) ? extraKey : [extraKey];

    if (extraKeys.length === 1) {
      keys.push({
        text: 0,
        wider: true
      }, {
        text: extraKeys[0],
        type: 'extra'
      });
    } else if (extraKeys.length === 2) {
      keys.push({
        text: extraKeys[0],
        type: 'extra'
      }, {
        text: 0
      }, {
        text: extraKeys[1],
        type: 'extra'
      });
    }

    return keys;
  };

  var keys = useMemo(function () {
    return props.theme === 'custom' ? genCustomKeys() : genDefaultKeys();
  }, [props.theme, genCustomKeys, genDefaultKeys]);

  var onBlur = function onBlur() {
    if (props.visible) {
      props.onBlur == null ? void 0 : props.onBlur();
    }
  };

  var onClose = function onClose() {
    props.onClose == null ? void 0 : props.onClose();

    if (props.blurOnClose) {
      onBlur();
    }
  };

  var onAnimationEnd = function onAnimationEnd() {
    var _props;

    (_props = props[props.visible ? 'onShow' : 'onHide']) == null ? void 0 : _props.call(props);
  };

  var onPress = function onPress(text, type) {
    if (text === '') {
      if (type === 'extra') {
        onBlur();
      }

      return;
    }

    var value = props.value;

    if (type === 'delete') {
      props.onDelete == null ? void 0 : props.onDelete();
      props.onChange == null ? void 0 : props.onChange(value.slice(0, value.length - 1));
    } else if (type === 'close') {
      onClose();
    } else if (value.length < props.maxlength) {
      props.onInput == null ? void 0 : props.onInput(text);
      props.onChange == null ? void 0 : props.onChange(value + text);
    }
  };

  var renderTitle = function renderTitle() {
    var title = props.title,
        theme = props.theme,
        closeButtonText = props.closeButtonText;
    var showClose = closeButtonText && theme === 'default';
    var showTitle = title || showClose;

    if (!showTitle) {
      return null;
    }

    return /*#__PURE__*/React.createElement("div", {
      className: cls(bem('header'))
    }, title && /*#__PURE__*/React.createElement("h2", {
      className: cls(bem('title'))
    }, title), showClose && /*#__PURE__*/React.createElement("button", {
      type: "button",
      className: cls(bem('close')),
      onClick: onClose
    }, closeButtonText));
  };

  var renderKeys = function renderKeys() {
    return keys.map(function (key, i) {
      var keySlots = null;

      if (!key.type) {
        keySlots = props.numberKeyRender == null ? void 0 : props.numberKeyRender(key);
      }

      if (key.type === 'delete') {
        keySlots = props.deleteRender == null ? void 0 : props.deleteRender();
      }

      if (key.type === 'extra') {
        keySlots = props.extraKeyRender == null ? void 0 : props.extraKeyRender();
      }

      return /*#__PURE__*/React.createElement(NumberKeyboardKey // eslint-disable-next-line react/no-array-index-key
      , {
        key: i,
        text: key.text,
        type: key.type,
        wider: key.wider,
        color: key.color,
        onPress: onPress // eslint-disable-next-line react/no-children-prop
        ,
        children: keySlots
      });
    });
  };

  var renderSidebar = function renderSidebar() {
    if (props.theme === 'custom') {
      return /*#__PURE__*/React.createElement("div", {
        className: cls(bem('sidebar'))
      }, props.showDeleteKey && /*#__PURE__*/React.createElement(NumberKeyboardKey, {
        large: true,
        text: props.deleteButtonText,
        type: "delete",
        onPress: onPress
      }), /*#__PURE__*/React.createElement(NumberKeyboardKey, {
        large: true,
        text: props.closeButtonText,
        type: "close",
        color: "blue",
        loading: props.closeButtonLoading,
        onPress: onPress
      }));
    }

    return null;
  };

  useUpdateEffect(function () {
    if (!props.transition) {
      var _props2;

      (_props2 = props[props.visible ? 'onShow' : 'onHide']) == null ? void 0 : _props2.call(props);
    }
  }, [props.visible]);
  useClickAway(root, props.hideOnClickOutside ? onBlur : noop, 'touchstart');
  var Title = renderTitle();
  var Content = /*#__PURE__*/React.createElement(CSSTransition, {
    mountOnEnter: true,
    unmountOnExit: true,
    nodeRef: root,
    in: props.visible,
    timeout: 300,
    classNames: props.transition ? 'rv-slide-up' : '',
    onExited: onAnimationEnd
  }, /*#__PURE__*/React.createElement("div", {
    ref: root,
    style: getZIndexStyle(props.zIndex),
    className: cls(bem({
      unfit: !props.safeAreaInsetBottom,
      'with-title': !!Title
    })),
    onTouchStart: stopPropagation
  }, Title, /*#__PURE__*/React.createElement("div", {
    className: cls(bem('body'))
  }, /*#__PURE__*/React.createElement("div", {
    className: cls(bem('keys'))
  }, renderKeys()), renderSidebar())));
  return Content;
};

NumberKeyboard.defaultProps = {
  transition: true,
  blurOnClose: true,
  showDeleteKey: true,
  hideOnClickOutside: true,
  safeAreaInsetBottom: true,
  theme: 'default',
  value: '',
  extraKey: '',
  maxlength: Number.MAX_VALUE
};
export default NumberKeyboard;