import { Dropdown, Image } from '@easyv/antd';
import React from 'react';
import styles from './style.less';
import qrCodePath from '../../../images/qrCode.png';
import { DownOutlined } from '@easyv/react-icons';
import { useSelector } from 'react-redux';
import { RootState } from 'models';
import classNames from 'classnames';
import { Link } from 'react-router-dom';
import {getAssetsUrl} from 'utils/utils';

const helpList = [
  {
    itemName: '帮助文档',
    url: `${window.appConfig.HOME_URL}/help`
  },
  {
    itemName: '视频中心',
    url: `${window.appConfig.HOME_URL}/video-center`
  },
  {
    itemName: '在线客服'
  }
];

const localHelpList = [
  {
    itemName: '帮助文档',
    url: getAssetsUrl(`/help/help.pdf`)
  },
  {
    itemName: '检测信息',
    url: getAssetsUrl(`/help/infor.txt`)
  }
];

const EasyvHelpDropdown = () => {
  const {
    userInfo: { type }
  } = useSelector((state: RootState) => state.user);

  const list = window.appConfig.LOCAL ? localHelpList : helpList;

  const overlay = () => {
    return (
      <div className={styles.content}>
        <div className={styles.helpList}>
          {list.map((item, key) => {
            const restProps = item.url ? { href: item.url } : {};
            if (item.url && item.url.startsWith('/')) {
              return <Link to={item.url}>{item.itemName}</Link>;
            }

            return (
              <a key={key} target="_blank" className={classNames({ [styles.qrCode]: item.itemName === '在线客服' })} {...restProps}>
                {item.itemName}
              </a>
            );
          })}
          {!window.appConfig.LOCAL && (
            <div className={styles.qrCodeContent}>
              <Image src={qrCodePath} />
              <span>扫一扫联系客服</span>
              <i className={classNames('icon iconfont icon-sanjiaoxing ' + styles.qrCodeIcon)} />
            </div>
          )}
        </div>
      </div>
    );
  };
  // 如果是独立部署并且不为教育版则可查看帮助中心，（独立部署增加下拉列表）
  // 如果是saas则可查看帮助中心下拉列表
  return type !== 'education' ? (
    <div className={styles.wrapper}>
      <Dropdown overlayClassName={styles.popover} overlay={overlay} placement="bottomLeft" trigger={['click']}>
        <div style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
          帮助中心
          <DownOutlined className={styles.down} />
        </div>
      </Dropdown>
    </div>
  ) : null;
};

export default EasyvHelpDropdown;
