import { Dropdown, Menu } from '@easyv/antd';
import React from 'react';
import { Link } from 'react-router-dom';
import { getScreenId, getTopScreenId } from 'utils/screen';
import styles from './style.less';
import { useAuth } from 'components/easyUse';
import { modules } from 'constants/authority';

type Props = {
  panelId: number;
  parentDom?: any;
};

const PreviewDropDown: React.FC<Props> = (props) => {
  const { checkAuth } = useAuth();

  if (checkAuth(modules.hideScreenDebug)) {
    return <>{props.children}</>;
  }
  const { panelId, parentDom } = props;
  const topScreenId = getTopScreenId();
  const id = getScreenId();
  const menu = (
    <Menu className={styles.menuContainer}>
      <Menu.Item key="bigscreen">
        <Link
          to={panelId ? `/panel/${topScreenId}/${panelId}/${id}` : `/bigscreen/${id}`}
          target="_blank"
          rel="noopener">
          预览模式
        </Link>
      </Menu.Item>
      <Menu.Item key="debugScreen">
        <Link
          to={
            panelId
              ? `/panel/${topScreenId}/${panelId}/${id}?easyvDebug=true`
              : `/bigscreen/${id}?easyvDebug=true`
          }
          target="_blank"
          rel="noopener">
          调试模式
        </Link>
      </Menu.Item>
    </Menu>
  );
  return (
    <Dropdown
      overlay={menu}
      getPopupContainer={() => (parentDom ? parentDom.current : document.body)}>
      {props.children}
    </Dropdown>
  );
};

export default PreviewDropDown;
