var _excluded = ["portal", "data", "autoFocus", "value", "placeholder", "maskAttribute", "submitAttribute", "inputProps", "carrouselProps", "liconAttribute", "licon", "onChange"],
    _excluded2 = ["onClick"];

function _extends() { _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; }; return _extends.apply(this, arguments); }

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, { forwardRef, useRef, useImperativeHandle, useEffect, useContext, useState } from 'react';
import { createPortal } from 'react-dom';
import Carrousel from './../Carrousel';
import InputPre from './../InputPre';
import Button from './../Button';
import Instance from './instance.js';
import emojiData from './instance.data.js';
import Context from '../Context/instance.js';
var Emoji = forwardRef(function (_ref, ref) {
  var portal = _ref.portal,
      _ref$data = _ref.data,
      data = _ref$data === void 0 ? emojiData : _ref$data,
      _ref$autoFocus = _ref.autoFocus,
      autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
      value = _ref.value,
      placeholder = _ref.placeholder,
      _ref$maskAttribute = _ref.maskAttribute,
      maskAttribute = _ref$maskAttribute === void 0 ? {} : _ref$maskAttribute,
      _ref$submitAttribute = _ref.submitAttribute,
      submitAttribute = _ref$submitAttribute === void 0 ? {} : _ref$submitAttribute,
      _ref$inputProps = _ref.inputProps,
      inputProps = _ref$inputProps === void 0 ? {} : _ref$inputProps,
      _ref$carrouselProps = _ref.carrouselProps,
      carrouselProps = _ref$carrouselProps === void 0 ? {} : _ref$carrouselProps,
      liconAttribute = _ref.liconAttribute,
      licon = _ref.licon,
      _onChange = _ref.onChange,
      others = _objectWithoutPropertiesLoose(_ref, _excluded);

  var refEl = useRef(null);
  useImperativeHandle(ref, function () {
    return refEl.current;
  }); // context

  var context = useContext(Context) || {};

  var locale = context.locale || function (remark) {
    return remark || '';
  };

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

  var instance = useRef(null); // 自动扩充功能

  function preAutoSize(target, preTarget) {
    target.style.height = preTarget.clientHeight + 'px';
  } // 初始化


  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 Instance({
      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

  useEffect(function () {
    setTempValue(value);
  }, [value]); // 因为synchronization模式, 每次组件在render的时候都生成了一份本次render的state、function、effects, 这些与之前或者之后的render没关系, 所以当值发生变化时需要即时的更新回调

  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 /*#__PURE__*/React.createElement("div", {
        key: "page" + i,
        className: "emoji-carrousel-slide"
      }, icon.map(function (item, index) {
        return /*#__PURE__*/React.createElement("a", {
          key: "face" + index,
          className: "emoji-face",
          "data-emoji": item.name,
          title: item.id
        }, "\xA0");
      }), /*#__PURE__*/React.createElement("a", {
        className: "emoji-face-delete"
      }, "\xA0"));
    });
  } // 过滤已经回调的属性


  function filterProps(props) {
    if (!props) return {};

    var onClick = props.onClick,
        otherProps = _objectWithoutPropertiesLoose(props, _excluded2);

    return _extends({}, otherProps);
  }

  function change(e, val) {
    setTempValue(val);
  } // 剔除掉onClick事件, 因为在instance时已经回调了


  var otherMaskAttribute = filterProps(maskAttribute);
  var otherSubmitAttribute = filterProps(submitAttribute);
  return createPortal( /*#__PURE__*/React.createElement("div", _extends({
    ref: refEl
  }, maskAttribute, {
    className: "mask emoji-mask active" + (otherMaskAttribute.className ? ' ' + otherMaskAttribute.className : '')
  }), /*#__PURE__*/React.createElement("div", _extends({}, others, {
    className: "emoji active" + (others.className ? ' ' + others.className : '')
  }), /*#__PURE__*/React.createElement("div", {
    className: "emoji-edit"
  }, licon, liconAttribute && /*#__PURE__*/React.createElement("i", _extends({}, liconAttribute, {
    className: "icon" + (liconAttribute.className ? ' ' + liconAttribute.className : '')
  })), /*#__PURE__*/React.createElement(InputPre, _extends({
    className: "emoji-edit-input",
    value: tempValue,
    placeholder: placeholder || locale('说点什么吧...', 'say_something')
  }, inputProps, {
    onChange: change
  })), /*#__PURE__*/React.createElement("i", {
    className: "icon emoji-edit-icon"
  }), /*#__PURE__*/React.createElement(Button, _extends({}, otherSubmitAttribute, {
    className: "emoji-edit-submit" + (otherSubmitAttribute.className ? ' ' + otherSubmitAttribute.className : ''),
    disabled: !tempValue
  }), otherSubmitAttribute.caption || locale('提交', 'submit'))), /*#__PURE__*/React.createElement(Carrousel, _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);
});
export default Emoji;