import {
  CustomerServiceOutlined,
  EditOutlined,
  ProfileOutlined,
  QuestionCircleOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Dropdown } from 'antd';
import React from 'react';
import { FormattedMessage, useHistory, useLocation, useModel } from 'umi';

const Help: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const history = useHistory();
  const location = useLocation();
  const currentPath = location.pathname;

  const items: MenuProps['items'] = [
    {
      key: '/about',
      label: <FormattedMessage id="pages.help.about" defaultMessage="关于UAC" />,
      icon: <ProfileOutlined />,
      onClick: () => {
        history.push('/about');
      },
    },
    {
      key: 'contact',
      label: <FormattedMessage id="pages.help.contact" defaultMessage="联系客服" />,
      icon: <CustomerServiceOutlined />,
      onClick: () => {
        window.open(
          'https://applink.feishu.cn/client/helpdesk/open?id=6982027327920144387&extra=%7B%22channel%22%3A1%2C%22created_at%22%3A1709522457%7D',
          '_blank',
        );
      },
    },
    // {
    //   key: 'feedback',
    //   label: <FormattedMessage id="pages.help.feedback" defaultMessage="反馈问卷" />,
    //   icon: <EditOutlined />,
    //   onClick: () => {
    //     window.open(initialState?.settings?.npxUrl, '_blank');
    //   },
    // },
  ];

  return (
    <>
      <Dropdown
        menu={{ items, selectable: true, selectedKeys: [currentPath] }}
        overlayStyle={{ width: '140px' }}
      >
        <div>
          <QuestionCircleOutlined style={{ cursor: 'pointer' }} />
        </div>
      </Dropdown>
    </>
  );
};

export default Help;