import React, { memo, useEffect, useState } from 'react';
import { CaretRightOutlined, PartitionOutlined } from '@ant-design/icons';
import Mousetrap from 'mousetrap';
import classNames from 'classnames';
import LayerOptions from './LayerOptions';
import styles from './ContextMenuModal.less';
import { isScreen } from 'utils/screen';
import { isGroup } from 'utils/utils';
import LayerSort from './LayerSort';
import { useAuth } from 'components/easyUse';
import { modules } from 'constants/authority';

function ContextMenuModal({
  isBeLinked = false,
  visible,
  selected,
  layerOptions,
  type,
  top,
  left,
  lock,
  show,
  focus,
  isAdmin,
  onClose,
  onCrossCopy,
  onClick
}) {
  const [layerVisible, setLayerVisible] = useState(false);
  const [layerSortVisible, setLayerSortVisible] = useState(false);
  const { checkAuth } = useAuth();

  useEffect(() => {
    window.addEventListener('click', onClose, false);
    return () => {
      window.removeEventListener('click', onClose, false);
    };
  }, [onClose]);

  useEffect(() => {
    setRestName({
      disabled: selected.length != 1
    });
  }, [selected]);
  const [resetName, setRestName] = useState({ disabled: false });

  const handleRename = (e) => {
    if (selected.length !== 1) {
      e.stopPropagation();
    } else {
      const event: any = new Event('rename');
      event.value = selected[0];
      window.dispatchEvent(event);
    }
  };

  const operateVisible = !!selected.length;
  const isContainsGroup = selected.some((d) => isGroup(d)); // 当前图层选中，有一个为组件都不可取消成组
  const componentCopyable = checkAuth(modules.componentAdd);

  return (
    <div
      id="easy-main-context"
      className={classNames(styles.menu, { show: visible })}
      style={{ top, left }}
      onContextMenu={(e) => e.preventDefault()}>
      <ul className={styles.wrap} style={{ display: layerOptions.length ? 'block' : 'none' }}>
        {type === 'screen' && (
          <li className={styles.item} onMouseEnter={() => setLayerVisible(true)} onMouseLeave={() => setLayerVisible(false)}>
            <i className="icon iconfont icon-icon_layer" />
            <span style={{ flex: 1 }}>选择图层</span>
            <CaretRightOutlined />
            <LayerOptions visible={layerVisible} options={layerOptions} />
          </li>
        )}
        <li className={styles.item} onMouseEnter={() => setLayerSortVisible(true)} onMouseLeave={() => setLayerSortVisible(false)}>
          <i className="icon iconfont icon-a-paixu1" />
          <span style={{ flex: 1 }}>图层排序</span>
          <CaretRightOutlined />
          {layerSortVisible && <LayerSort />}
        </li>
      </ul>
      <ul className={styles.wrap} style={{ display: operateVisible ? 'block' : 'none' }}>
        <li className={styles.item} onClick={() => Mousetrap.trigger('command+g')}>
          <i className="icon iconfont icon-icon_right_group" />
          <span>成组</span>
        </li>
        <li
          className={classNames(styles.item, !isContainsGroup ? styles.cancelGroup : '')}
          onClick={() => Mousetrap.trigger('command+shift+g')}>
          <i className="icon iconfont icon-icon_right_ungroup" />
          <span>取消成组</span>
        </li>
      </ul>

      <ul className={styles.wrap}>
        {componentCopyable && (
          <li className={styles.item} onClick={() => Mousetrap.trigger('command+d')} style={{ display: operateVisible ? 'flex' : 'none' }}>
            <i className="icon iconfont icon-a-fuzhi1" />
            <span>复制</span>
          </li>
        )}
        {componentCopyable && (
          <li className={styles.item} onClick={() => Mousetrap.trigger('command+v')}>
            <i className="icon iconfont icon-a-fuzhi12" />
            <span>粘贴</span>
          </li>
        )}
        {componentCopyable && (
          <li className={styles.item} onClick={onCrossCopy} style={{ display: operateVisible ? 'flex' : 'none' }}>
            <i className="icon iconfont icon-a-fuzhi1" />
            <span>复制到大屏</span>
          </li>
        )}
        {componentCopyable && (
          <li className={styles.item} onClick={() => Mousetrap.trigger('command+c')} style={{ display: operateVisible ? 'flex' : 'none' }}>
            <i className="icon iconfont icon-icon_copy1" />
            <span>拷贝</span>
          </li>
        )}

        <li
          className={styles.item}
          onClick={() => Mousetrap.trigger('command+alt+c')}
          style={{ display: operateVisible ? 'flex' : 'none' }}>
          <i className="icon iconfont icon-a-fuzhi1" />
          <span>复制组件样式</span>
        </li>
        <li
          className={styles.item}
          onClick={() => Mousetrap.trigger('command+alt+v')}
          style={{ display: operateVisible ? 'flex' : 'none' }}>
          <i className="icon iconfont icon-a-fuzhi12" />
          <span>粘贴组件样式</span>
        </li>
      </ul>

      <ul className={styles.wrap} style={{ display: operateVisible ? 'block' : 'none' }}>
        <li className={styles.item} {...resetName} onClick={handleRename}>
          <i className="icon iconfont icon-a-bianji1" />
          <span>重命名</span>
        </li>
        <li className={styles.item} onClick={() => Mousetrap.trigger('command+shift+h')}>
          <i className={`icon iconfont ${show ? 'icon-icon_right_hide' : 'icon-btn_eyesopen'}`} />
          <span>{show ? '隐藏' : '显示'}</span>
        </li>
        <li className={styles.item} onClick={() => Mousetrap.trigger('command+shift+l')}>
          <i className={`icon iconfont ${lock ? 'icon-icon_unlock' : 'icon-icon_lock'}`} />
          <span>{lock ? '解锁' : '锁定'}</span>
        </li>
        <li className={styles.item} onClick={() => onClick('focus')}>
          <i className={`icon iconfont ${focus ? 'icon-unlight' : 'icon-Bulb'}`} />
          <span>{focus ? '取消单独显示' : '单独显示图层'} </span>
        </li>
      </ul>

      <ul className={styles.wrap} style={{ display: operateVisible ? 'block' : 'none' }}>
        <li className={styles.item} onClick={() => Mousetrap.trigger('del')}>
          <i className="icon iconfont icon-icon_right_delete" />
          <span>删除</span>
        </li>
      </ul>

      {isScreen() && (
        <ul className={styles.wrap} style={{ display: operateVisible ? 'block' : 'none' }}>
          {checkAuth(modules.resource) && (
            <li className={styles.item} onClick={() => Mousetrap.trigger('command+shift+d')}>
              <i className={'icon iconfont icon-icon_collect'} />
              <span>收藏</span>
            </li>
          )}
          {checkAuth(modules.resource) && isAdmin && (
            <li className={styles.item} onClick={() => Mousetrap.trigger('command+shift+d+2')}>
              <i className={'icon iconfont icon-save'} />
              <span>保存为主题资源</span>
            </li>
          )}
        </ul>
      )}

      {componentCopyable && isScreen() && (
        <ul className={styles.wrap} style={{ display: operateVisible ? 'block' : 'none' }}>
          <li className={styles.item} onClick={() => Mousetrap.trigger('command+shift+d+3')}>
            <i className={'icon iconfont icon-icon_convert'} />
            <span>转为动态面板</span>
          </li>
        </ul>
      )}
      <ul className={styles.wrap} style={{ display: selected.length ? 'block' : 'none' }}>
        <li
          className={styles.item}
          {...{
            disabled: resetName.disabled || !isBeLinked
          }}
          onClick={() => Mousetrap.trigger('command+shift+d+4')}>
          {/* <i className={'icon iconfont icon-icon_convert'} /> */}
          <PartitionOutlined className="icon" />
          <span>在节点管理定位</span>
        </li>
      </ul>
    </div>
  );
}

export default memo(ContextMenuModal);
