'use strict';

exports.__esModule = true;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _Carrousel = require('./../Carrousel');

var _Carrousel2 = _interopRequireDefault(_Carrousel);

var _InputPre = require('./../InputPre');

var _InputPre2 = _interopRequireDefault(_InputPre);

var _Button = require('./../Button');

var _Button2 = _interopRequireDefault(_Button);

var _instance = require('./instance.js');

var _instance2 = _interopRequireDefault(_instance);

var _instanceData = require('./instance.data.js');

var _instanceData2 = _interopRequireDefault(_instanceData);

var _instance3 = require('../Context/instance.js');

var _instance4 = _interopRequireDefault(_instance3);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

var Emoji = (0, _react.forwardRef)(function (_ref, ref) {
  var portal = _ref.portal,
      _ref$data = _ref.data,
      data = _ref$data === undefined ? _instanceData2.default : _ref$data,
      _ref$autoFocus = _ref.autoFocus,
      autoFocus = _ref$autoFocus === undefined ? false : _ref$autoFocus,
      value = _ref.value,
      placeholder = _ref.placeholder,
      _ref$maskAttribute = _ref.maskAttribute,
      maskAttribute = _ref$maskAttribute === undefined ? {} : _ref$maskAttribute,
      _ref$submitAttribute = _ref.submitAttribute,
      submitAttribute = _ref$submitAttribute === undefined ? {} : _ref$submitAttribute,
      _ref$inputProps = _ref.inputProps,
      inputProps = _ref$inputProps === undefined ? {} : _ref$inputProps,
      _ref$carrouselProps = _ref.carrouselProps,
      carrouselProps = _ref$carrouselProps === undefined ? {} : _ref$carrouselProps,
      liconAttribute = _ref.liconAttribute,
      licon = _ref.licon,
      _onChange = _ref.onChange,
      others = _objectWithoutProperties(_ref, ['portal', 'data', 'autoFocus', 'value', 'placeholder', 'maskAttribute', 'submitAttribute', 'inputProps', 'carrouselProps', 'liconAttribute', 'licon', 'onChange']);

  var refEl = (0, _react.useRef)(null);
  (0, _react.useImperativeHandle)(ref, function () {
    return refEl.current;
  });
  // context
  var context = (0, _react.useContext)(_instance4.default) || {};
  var locale = context.locale || function (key) {
    return key || '';
  };

  var _useState = (0, _react.useState)(value),
      tempValue = _useState[0],
      setTempValue = _useState[1];

  var instance = (0, _react.useRef)(null);
  // 自动扩充功能
  function preAutoSize(target, preTarget) {
    target.style.height = preTarget.clientHeight + 'px';
  }
  // 初始化
  (0, _react.useEffect)(function () {
    // 输入框
    var elInput = refEl.current.querySelector('.input-pre');
    if (!elInput) return;
    var elPre = elInput.nextElementSibling;
    if (elPre.tagName !== 'PRE') return;
    if (autoFocus && elInput) elInput.focus();
    instance.current = new _instance2.default({
      data: data,
      mask: refEl.current,
      isClickMaskHide: false
      // onClickMask: (s) => {
      //   if (maskAttribute.onClick) maskAttribute.onClick(s.event)
      // },
      // onClickSubmit: (s) => {
      //   if (submitAttribute.onClick) {
      //     submitAttribute.onClick(s.event, tempValue)
      //   }
      // },
      // onChange: (s, val) => { // 点击表情
      //   setTempValue(val)
      //   // 自增高
      //   preAutoSize(elInput, elPre);
      //   // 触发onChange
      //   if (onChange) onChange(s, val)
      // }
    });
    // 如果初始化就有值, 则设置光标位置和自增高
    if (elInput.value) {
      instance.current.cursorOffset = elInput.value.length - 1;
      instance.current.setCaretPosition(elInput, instance.current.cursorOffset);
      // 自增高
      preAutoSize(elInput, elPre);
    }
  }, []); // eslint-disable-line

  (0, _react.useEffect)(function () {
    setTempValue(value);
  }, [value]);

  // 因为synchronization模式, 每次组件在render的时候都生成了一份本次render的state、function、effects, 这些与之前或者之后的render没关系, 所以当值发生变化时需要即时的更新回调
  (0, _react.useEffect)(function () {
    // 输入框
    var elInput = refEl.current.querySelector('.input-pre');
    if (!elInput) return;
    var elPre = elInput.nextElementSibling;
    if (elPre.tagName !== 'PRE') return;
    instance.current.updateParams({
      onClickMask: function onClickMask(s) {
        if (maskAttribute.onClick) maskAttribute.onClick(s.event);
      },
      onClickSubmit: function onClickSubmit(s) {
        if (submitAttribute.onClick) {
          submitAttribute.onClick(s.event, tempValue);
        } else if (_onChange) {
          // 触发onChange
          if (_onChange) _onChange(s, tempValue);
        }
      },
      onChange: function onChange(s, val) {
        // 点击表情
        setTempValue(val);
        // 自增高
        preAutoSize(elInput, elPre);
        // 触发onChange
        if (_onChange) _onChange(s, val);
      }
    });
  }, [tempValue]);

  // 表情
  function getFaceDOM() {
    // icons分页变量
    var icons = [];
    var page = 0;
    var index = 0;
    var count = 23;
    // icons分页
    for (var name in data) {
      if (index !== 0 && index % count === 0) {
        page++;
      }
      if (!icons[page]) icons[page] = [];
      icons[page].push({ id: name, name: data[name] });
      index++;
    }
    // 生成DOM
    return icons.map(function (icon, i) {
      return _react2.default.createElement(
        'div',
        { key: 'page' + i, className: 'emoji-carrousel-slide' },
        icon.map(function (item, index) {
          return _react2.default.createElement(
            'a',
            { key: 'face' + index, className: 'emoji-face', 'data-emoji': item.name, title: item.id },
            '\xA0'
          );
        }),
        _react2.default.createElement(
          'a',
          { className: 'emoji-face-delete' },
          '\xA0'
        )
      );
    });
  }

  // 过滤已经回调的属性
  function filterProps(props) {
    if (!props) return {};

    var onClick = props.onClick,
        otherProps = _objectWithoutProperties(props, ['onClick']);

    return _extends({}, otherProps);
  }

  function change(e, val) {
    setTempValue(val);
  }

  // 剔除掉onClick事件, 因为在instance时已经回调了
  var otherMaskAttribute = filterProps(maskAttribute);
  var otherSubmitAttribute = filterProps(submitAttribute);
  return (0, _reactDom.createPortal)(_react2.default.createElement(
    'div',
    _extends({ ref: refEl }, maskAttribute, { className: 'mask emoji-mask active' + (otherMaskAttribute.className ? ' ' + otherMaskAttribute.className : '') }),
    _react2.default.createElement(
      'div',
      _extends({}, others, { className: 'emoji active' + (others.className ? ' ' + others.className : '') }),
      _react2.default.createElement(
        'div',
        { className: 'emoji-edit' },
        licon,
        liconAttribute && _react2.default.createElement('i', _extends({}, liconAttribute, { className: 'icon' + (liconAttribute.className ? ' ' + liconAttribute.className : '') })),
        _react2.default.createElement(_InputPre2.default, _extends({
          className: 'emoji-edit-input',
          value: tempValue,
          placeholder: placeholder || locale('说点什么吧...', 'say_something')
        }, inputProps, {
          onChange: change
        })),
        _react2.default.createElement('i', { className: 'icon emoji-edit-icon' }),
        _react2.default.createElement(
          _Button2.default,
          _extends({}, otherSubmitAttribute, { className: 'emoji-edit-submit' + (otherSubmitAttribute.className ? ' ' + otherSubmitAttribute.className : ''), disabled: !tempValue }),
          otherSubmitAttribute.caption || locale('提交', 'submit')
        )
      ),
      _react2.default.createElement(
        _Carrousel2.default,
        _extends({}, carrouselProps, {
          pagination: true,
          className: 'carrousel-container emoji-carrousel' + (carrouselProps.className ? ' ' + carrouselProps.className : ''),
          style: Object.assign({ display: 'none' }, carrouselProps.style)
        }),
        getFaceDOM()
      )
    )
  ), portal || context.portal || document.getElementById('root') || document.body);
});

exports.default = Emoji;
module.exports = exports['default'];