/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect } from 'react';
import QuestionCircleOutlined from '@ant-design/icons/QuestionCircleOutlined';
import { Tooltip } from '@easyv/antd';
import classNames from 'classnames';
import { Progress } from '@easyv/antd';
import MenuItem from './MenuItem';
import { GROUP_FIELDS as F } from '../../constant';
import styles from '../../../screen-list/components/GroupMenu.less';
import ownstyles from './index.less';
import { useAuth } from 'components/easyUse';

function GroupMenu({ menulist, groupId, onChange, storage }) {
  const [slide, setSlide] = useState(true);
  const { checkAuth } = useAuth();

  useEffect(() => {
    onChange([0, F.TEMPLATE, 0]);
  }, []);

  const selectMenu = (arg) => {
    onChange(arg);
  };

  const handleSlide = () => {
    setSlide((slide) => !slide);
  };

  const percent = storage ? (storage.used / storage.total) * 100 : 0;

  return (
    <div className={classNames(styles.container, ownstyles.container)}>
      <MenuItem
        isSlide={true}
        titleIcon={<i className={'icon iconfont icon-template1'} />}
        title="模板库"
        list={menulist[0]}
        onChange={(id) => selectMenu([id, F.TEMPLATE, 0])}
        groupId={groupId}
        type={0}
      />
      <div className={ownstyles.middle}>
        <div className={styles.title} style={{ padding: '22px 20px 14px 20px' }}>
          <p className={styles.title_left} onClick={handleSlide}>
            <i
              className={classNames('icon iconfont icon-sanjiaoxing ' + styles.app_icon_drop)}
              style={{ transform: slide ? 'rotate(90deg)' : 'rotate(0deg)' }}
            />
            <i className={'icon iconfont icon-material'} />
            <span className={styles.app_list}>素材库</span>
          </p>
        </div>
        <div className={classNames(ownstyles.slide, { [ownstyles.active]: slide })}>
          <MenuItem
            isSlide={true}
            title="设计素材"
            list={menulist[1]}
            style={{ padding: '9px 20px' }}
            onChange={(id) => selectMenu([id, F.MATERIAL, 1])}
            groupId={groupId}
            type={1}
          />
          <MenuItem
            isSlide={true}
            title="主题资源"
            style={{ padding: '9px 20px' }}
            list={menulist[2]}
            onChange={(id) => selectMenu([id, F.MATERIAL, 2])}
            groupId={groupId}
            type={2}
          />
        </div>
      </div>
      <MenuItem
        isSlide={true}
        titleIcon={<i className={'icon iconfont icon-modal-library'} />}
        title="模型库"
        list={menulist[3]}
        onChange={(id) => selectMenu([id, F.MATERIAL, 3])}
        groupId={groupId}
        type={3}
      />
      {!window.appConfig.LOCAL && (
        <div className={classNames(styles.appNum, ownstyles.appNum)}>
          <div className={styles.appNumHeader}>
            <p className={styles.appNumText}>
              <span>存储数</span>
              <Tooltip
                title={
                  <span>
                    资源中心可存储资源数量，包
                    <br />
                    含模板库和素材库所有资源
                  </span>
                }>
                <span style={{ cursor: 'pointer', marginLeft: '5px' }}>
                  <QuestionCircleOutlined className="whiteHover" />
                </span>
              </Tooltip>
            </p>
            <p>
              <span className={styles.currentNum} style={storage?.used > storage?.total ? { color: '#EB515A' } : undefined}>
                {storage?.used || 0}
              </span>
              <span className={styles.totalNum} style={{ color: '#b4b7c1', fontSize: '12px' }}>
                /{storage?.total || 0}
              </span>
            </p>
          </div>
          <Progress percent={percent} showInfo={false} status={percent > 90 ? 'exception' : 'normal'} trailColor="#3D4154" />
        </div>
      )}
    </div>
  );
}

export default GroupMenu;
