import React, { useEffect, useState } from 'react';
import Popover from 'antd/lib/popover/index'
import Menu from 'antd/lib/menu/index'
import './index.scss'
import { RendererEnv } from '../../../../env';
import ClipboardJS from 'clipboard'
import MSG from '../../utils/msgsub';

export default (
  props: {
    showItems: any[],
    env: RendererEnv,
    children: JSX.Element,
    canOpenWin?: boolean, //是否可以打开新窗口
    openWin?: (...res: any) => void
  }
) => {

  const [visible, setVisible] = useState(false);

  useEffect(() => {
    if (document.querySelector(".lion-copybtn")) return

    const lionBtn = document.createElement('button');
    lionBtn.setAttribute("class", "lion-copybtn");
    lionBtn.setAttribute("data-clipboard-action", "cut");
    lionBtn.setAttribute("data-clipboard-text", "");
    lionBtn.style.cssText = "display:none"
    document.body.appendChild(lionBtn)

  }, [])

  useEffect(() => {

    if (window.clipboard) return

    window.clipboard = new ClipboardJS('.lion-copybtn');

    window.clipboard.on('success', function (e: any) {
      MSG._success('复制成功', props.env?.getModalContainer)
    });

    window.clipboard.on('error', function (e: any) {
      MSG._error('复制失败', props.env?.getModalContainer)
    });
  }, [])

  const handleClick = (e: any, value: any) => {
    e?.domEvent.preventDefault()
    const copyBtn: any = document.querySelector('.lion-copybtn');
    copyBtn?.setAttribute('data-clipboard-text', value ? value : '');
    copyBtn!.click()
    setVisible(false)
  }

  const { showItems, env, children, canOpenWin } = props;


  const appShell: any = window['AppShell'];
  const hasOpenWin = !!appShell?.openNewWin
  const _showItems = [...showItems]

  if (canOpenWin && hasOpenWin) {
    _showItems.push({
      click: () => {
        // 打开新窗口
        props.openWin?.()
      },
      label: "新窗口打开",
      icon: "fa fa-sticky-note-o"
    })
  }

  const onPropsClick = (item: any) => {
    item.click(item.value)
    setVisible(false)
  }

  return (
    <Popover
      visible={visible}
      overlayClassName="lion-copy-item"
      destroyTooltipOnHide={true}
      placement="bottom"
      arrowPointAtCenter={true}
      getPopupContainer={env?.getTopModalContainer}
      trigger={["contextMenu"]}
      onVisibleChange={(visible) => {
        setVisible(visible)
      }}
      content={
        <Menu>
          {
            _showItems.map((item: any, index: number) =>
              <Menu.Item onClick={(e: any) => {
                item.click ? onPropsClick(item) : handleClick(e, item.value)
              }} key={index} >
                <span className={item.icon} style={{ marginRight: '10px' }} />
                {item.label}
              </Menu.Item>)
          }
        </Menu>
      }
    >
      {children}
    </Popover>
  )
}