import React, { memo, useEffect, useMemo, useState } from 'react';
import styles from './index.less';
import classnames from 'classnames';
import Filter from 'containers/screen-edit/components/RightZoneBar/Filter';
import Data from 'containers/screen-edit/components/RightZoneBar/DataBox';
import Callback from 'containers/screen-edit/components/RightZoneBar/Callback';
import ComponentsUpgrade from 'containers/screen-edit/components/RightZoneBar/ComponentsUpgrade';
import ScreenTheme from 'containers/screen-edit/components/RightZoneBar/ScreenTheme';
import EasyvSpin from 'components/EasyvSpin';
import { connect } from 'react-redux';
import { screenStateType } from 'models/screen-edit';
import { setCenterActivatedState } from 'models/screen-detail';
import {
  FilterLightColored,
  AdjustmentLightColored,
  DataContainerLightColored,
  CmykLightColored,
  AutoRenewLightColored,
} from '@easyv/react-icons';
import { useAuth } from 'components/easyUse';
import { modules } from 'constants/authority';

export const authorityConfig = {
  // 权限互斥，若 当前主题风格激活，那么values 都会被 🔐
  主题风格: [
    '组件',
    '资源',
    '动态面板',
    '引用面板',
    '数据容器',
    '项目过滤器',
    '回调管理',
    '组件更新',
    '回收站',
    '搜索',
    '通知',
  ],
};

const getCenterMenusByAuthority = (authority: boolean) => {
  if (authority) {
    return [
      {
        icon: <CmykLightColored className={styles.icon} />,
        name: '主题风格',
        element: ScreenTheme,
      },
      {
        icon: <AutoRenewLightColored className={styles.icon} />,
        name: '组件更新',
        element: ComponentsUpgrade,
      },
    ];
  }

  return [
    {
      icon: <DataContainerLightColored className={styles.icon} />,
      name: '数据容器',
      element: Data,
    },
    {
      icon: <FilterLightColored className={styles.icon} />,
      name: '项目过滤器',
      element: Filter,
    },
    {
      icon: <AdjustmentLightColored className={styles.icon} />,
      name: '回调管理',
      element: Callback,
    },
    {
      icon: <CmykLightColored className={styles.icon} />,
      name: '主题风格',
      element: ScreenTheme,
    },
    {
      icon: <AutoRenewLightColored className={styles.icon} />,
      name: '组件更新',
      element: ComponentsUpgrade,
    },
  ];
};

function ScreenTools({
  centerActivatedState,
  dispatch,
  screenState,
}: {
  screenState: screenStateType;
  centerActivatedState: string;
  dispatch: any;
}) {
  const [curLoadingMenu, setCurLoadingMenu] = useState('');
  const { checkAuth } = useAuth();
  useEffect(() => {
    if (screenState === 2) {
      setCurLoadingMenu('');
    }
  }, [screenState]);
  const centerMenus = useMemo(() => {
    return checkAuth(modules.componentAdd)
      ? getCenterMenusByAuthority(checkAuth('unShowTool'))
      : getCenterMenusByAuthority(checkAuth('unShowTool')).filter((d) => d.name !== '组件更新');
  }, [checkAuth]).filter((d) => !(!/\/create\/([0-9]+)/.test(window.location.pathname) && d.name === '数据容器'));
  return (
    <div className={styles.screenTools}>
      {centerMenus.map((d) => {
        const Element: any = d.element;
        return (
          <div
            key={d.name}
            className={classnames(styles.item, {
              [styles.lock]: authorityConfig[centerActivatedState]?.includes(d.name),
            })}>
            <Element
              name={d.name}
              isClose={d.name === centerActivatedState}
              onRecycleCallback={(visible) => {
                if (!visible && d.name === centerActivatedState) {
                  dispatch(setCenterActivatedState(''));
                }
              }}>
              <EasyvSpin loading={curLoadingMenu === d.name}>
                <div
                  className={classnames(styles.itemBox, {
                    [styles.active]: centerActivatedState === d.name,
                  })}
                  onClick={(e) => {
                    // 如果大屏数据没有加载完成，则单击对应的功能菜单显示loading
                    if (screenState < 2) {
                      setCurLoadingMenu(d.name);
                      e.stopPropagation();
                    } else {
                      d.name &&
                        dispatch(
                          setCenterActivatedState(d.name === centerActivatedState ? '' : d.name),
                        );
                      // HACK easyv-gui-drawer-close节点始终都不存在， 这段代码似乎始终都是没有做任何事儿
                      // const isSame = d.name === centerActivatedState;
                      // if (isSame) {
                      //   setTimeout(() => {
                      //     document
                      //       .querySelectorAll('.easyv-gui-drawer-close')
                      //       .forEach((value: any) => value.click());
                      //   }, 0);
                      // }
                    }
                  }}>
                  {d.icon}
                  <span className={styles.text}>{d.name}</span>
                </div>
              </EasyvSpin>
            </Element>
          </div>
        );
      })}
    </div>
  );
}

function mapStateToProps({ screenDetail, screenEdit }) {
  const { centerActivatedState } = screenDetail;

  return {
    screenState: screenEdit.screenState,
    centerActivatedState,
  };
}

export default connect(mapStateToProps)(memo(ScreenTools));
