import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import "core-js/modules/web.timers.js";
import classNames from 'classnames';
import React, { useState, useEffect, useRef } from 'react';
import './index.css';
import { BlinkingBox } from '../blinking-box';
import { FcrIconType } from '../icon/type';
import { FcrIcon } from '../icon';
import { IconText } from '../icon-text';
import { TextBubble } from '../text-bubble';
import { MultiSelect } from '../multi-select';
import { useI18n } from '../../i18n';
import { MessageTextArea as MessageTextAreaMobile } from '../message-textarea-mobile';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
var CLEAR_NOTICE_INTERVAL = 10 * 1000;
var FADE_OUT_INTERVAL = 1 * 1000;
export var CHAT_WRAPPER_CLASS = 'fcr-chat-wrapper-mobile';
export var ChatWrapper = function ChatWrapper(_ref) {
  var styles = _ref.styles,
    errorMsg = _ref.errorMsg,
    singling = _ref.singling,
    forbidden = _ref.forbidden,
    isHost = _ref.isHost,
    forBiddenTxt = _ref.forbiddenTxt,
    children = _ref.children,
    handMsg = _ref.handMsg,
    msgBarElement = _ref.msgBarElement,
    onSelectCancel = _ref.onSelectCancel,
    onSelectConfirm = _ref.onSelectConfirm,
    _ref$multiSelectActiv = _ref.multiSelectActive,
    multiSelectActive = _ref$multiSelectActiv === void 0 ? false : _ref$multiSelectActiv,
    selectCnt = _ref.selectCnt,
    _ref$targetUserIsOnli = _ref.targetUserIsOnline,
    targetUserIsOnline = _ref$targetUserIsOnli === void 0 ? false : _ref$targetUserIsOnli,
    selectTargetNickname = _ref.selectTargetNickname,
    handleClickUploadImage = _ref.handleClickUploadImage,
    _ref$defaultMsg = _ref.defaultMsg,
    defaultMsg = _ref$defaultMsg === void 0 ? '' : _ref$defaultMsg,
    updateChatTextMsg = _ref.updateChatTextMsg,
    privateTarget = _ref.privateTarget,
    autoSizeParams = _ref.autoSizeParams;
  var cls = classNames(CHAT_WRAPPER_CLASS, _defineProperty({}, "".concat(CHAT_WRAPPER_CLASS, "-radius"), singling));
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    errVisible = _useState2[0],
    setErrVisible = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    showUserOffline = _useState4[0],
    setShowUserOffline = _useState4[1];
  var _useState5 = useState('info'),
    _useState6 = _slicedToArray(_useState5, 2),
    noticeType = _useState6[0],
    setNoticeType = _useState6[1];
  var _useState7 = useState('fcr-notice-animation-in'),
    _useState8 = _slicedToArray(_useState7, 2),
    tipClassnames = _useState8[0],
    setTipClassnames = _useState8[1];
  var _useState9 = useState(privateTarget),
    _useState0 = _slicedToArray(_useState9, 2),
    lastTarget = _useState0[0],
    setLastTarget = _useState0[1];
  var hideNoticeTimeout = useRef(0);
  var animationTimeout = useRef(0);
  var t = useI18n();
  useEffect(function () {
    if (privateTarget !== lastTarget) {
      setLastTarget(privateTarget);
      // 选择其他在线用户
      if (targetUserIsOnline) {
        handleTipsAnimation(FADE_OUT_INTERVAL);
      }
    }
    return function () {
      clearTimeout(hideNoticeTimeout.current);
      clearTimeout(animationTimeout.current);
    };
  }, [privateTarget]);

  // 渐出
  useEffect(function () {
    // 用户重新进来, 一定时间后消失
    if (targetUserIsOnline && showUserOffline) {
      handleTipsAnimation(CLEAR_NOTICE_INTERVAL);
    }
    return function () {
      clearTimeout(hideNoticeTimeout.current);
      clearTimeout(animationTimeout.current);
    };
  }, [targetUserIsOnline]);

  // 渐入
  useEffect(function () {
    if (targetUserIsOnline) {
      return;
    }

    // 选中的用户不在线
    setShowUserOffline(true);
    setNoticeType('info');
    setTipClassnames('fcr-notice-animation-in');
    clearTimeout(hideNoticeTimeout.current);
    clearTimeout(animationTimeout.current);
  }, [selectTargetNickname, targetUserIsOnline]);
  var handleTipsAnimation = function handleTipsAnimation(delay) {
    hideNoticeTimeout.current = window.setTimeout(function () {
      setShowUserOffline(false);
      setNoticeType('info');
      setTipClassnames('fcr-notice-animation-in');
    }, delay);
    animationTimeout.current = window.setTimeout(function () {
      setTipClassnames('fcr-notice-animation-out');
    }, delay - FADE_OUT_INTERVAL);
  };
  return /*#__PURE__*/_jsxs("div", {
    className: cls,
    children: [/*#__PURE__*/_jsx("div", {
      className: classNames('fcr-chat-container-wrapper'),
      children: /*#__PURE__*/_jsx("div", {
        className: "fcr-chat-container",
        children: children
      })
    }), multiSelectActive ? /*#__PURE__*/_jsx(MultiSelect, {
      onCancel: onSelectCancel,
      onConfirm: onSelectConfirm,
      selectCnt: selectCnt
    }) : /*#__PURE__*/_jsx("div", {
      className: "fcr-chat-msg-box",
      children: forbidden ? /*#__PURE__*/_jsx(TextBubble, {
        styles: {
          minWidth: 312,
          maxHeight: 37
        },
        txt: /*#__PURE__*/_jsx(IconText, {
          icon: FcrIconType.FCR_SETTING_NONE,
          colors: {
            iconPrimary: 'var(--fcr_ui_scene_icontext1)'
          },
          txt: forBiddenTxt
        }),
        type: "gray_2",
        lineHeight: "large"
      }) : /*#__PURE__*/_jsxs(_Fragment, {
        children: [/*#__PURE__*/_jsx(BlinkingBox, {
          visible: errVisible,
          type: 'error',
          onChange: function onChange(val) {
            if (!val) {
              setErrVisible(false);
            }
          },
          content: /*#__PURE__*/_jsx("span", {
            children: errorMsg
          })
        }), /*#__PURE__*/_jsx(BlinkingBox, {
          classnames: tipClassnames,
          animationType: "slide",
          styles: {
            justifyContent: 'flex-start'
          },
          visible: showUserOffline,
          type: noticeType,
          onChange: function onChange(val) {
            if (!val) {
              setShowUserOffline(false);
            }
          },
          content: /*#__PURE__*/_jsxs("div", {
            className: "fcr-blink-content--user-state",
            children: [/*#__PURE__*/_jsx("div", {
              style: {
                width: 32,
                height: 32
              },
              children: /*#__PURE__*/_jsx(FcrIcon, {
                size: 32,
                type: FcrIconType.FCR_ONELEAVE,
                colors: {
                  iconPrimary: noticeType === 'info' ? 'var(--fcr_ui_scene_white10)' : 'var(--fcr_ui_scene_black6)'
                }
              })
            }), /*#__PURE__*/_jsxs("p", {
              children: [/*#__PURE__*/_jsx("span", {
                className: "fcr-user-offline-nickname fcr-break-one-line fcr-word-break",
                children: selectTargetNickname
              }), /*#__PURE__*/_jsx("span", {
                className: "fcr-user-offline-txt",
                children: t('fmt_chat_tips_otherpartyleave')
              })]
            })]
          })
        }), msgBarElement, /*#__PURE__*/_jsx(MessageTextAreaMobile, {
          updateErrVisible: function updateErrVisible(visible) {
            setErrVisible(visible);
          },
          onMsg: function onMsg(msg) {
            if (showUserOffline) {
              setNoticeType('warn');
              return;
            }
            setErrVisible(false);
            handMsg && handMsg(msg);
          },
          handleClickUploadImage: handleClickUploadImage,
          defaultMsg: defaultMsg,
          updateChatTextMsg: updateChatTextMsg,
          autoSizeParams: autoSizeParams
        })]
      })
    })]
  });
};