// 同步
import React, { useState } from 'react';
import { Tooltip, Space } from '@easyv/antd';
import styles from './SynchronizationModal.less';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { copyTemplatePassword } from 'services/template';
import classNames from 'classnames';
import EasyvButton from 'components/EasyvButton';
import message from 'components/message';
import EasyvModal, { useActionModalRef } from 'components/EasyvModal';

function ShareScreenModal({ children, screenId }: { children: React.ReactNode; screenId: number }) {
  const handleOk = () => {
    const oInput = document.createElement('input');
    oInput.value = Key;
    document.body.appendChild(oInput);
    oInput.select(); // 选择对象
    document.execCommand('Copy'); // 执行浏览器复制命令
    oInput.style.display = 'none';
    document.body.removeChild(oInput);
    message.success('复制成功');
  };
  const modalRef = useActionModalRef();
  const [loading, setLoading] = useState<boolean>(false);
  const [Key, setKey] = useState<string>('');

  const getPassword = async () => {
    setLoading(true);
    const param = {
      screenId
    };
    /\/app/.test(window.location.pathname) ? (param['isMobile'] = true) : null;
    screenId &&
      (await copyTemplatePassword(param).then((res) => {
        setKey(res.key);
      }));
    //  await new Promise((resolve,reject)=>{
    //    setTimeout(() => {
    //      copyTemplatePassword(param).then((res) => {
    //       setKey(res.key);
    //       resolve(1);
    //     });
    //    }, 2000);
    //   })

    await setLoading(false);
  };
  const onReset = () => {
    !loading && getPassword();
  };

  return (
    <>
      <span
        className={styles.shareScreenModal}
        onClick={() => {
          getPassword();
          modalRef.current?.show();
        }}>
        {children}
      </span>
      <EasyvModal.ActionModal
        title="同步应用给他人"
        width={520}
        ref={modalRef}
        onOk={handleOk}
        footer={null}
        closable={true}
        onCancel={() => modalRef.current?.close()}
        content={
          <>
            <p className={styles.describe}>动态口令只能使用一次，10分钟内有效</p>
            <div className={styles.password}>
              <span>动态口令：</span>
              <Tooltip
                placement="bottomLeft"
                title={
                  '将动态口令发送给对方，对方在「数据大屏」的导入功能选择同步应用即可复制该项目。同步应用包含完整数据配置，请谨慎操作。'
                }>
                <ExclamationCircleOutlined className={styles.icon} />
              </Tooltip>
              <div className={styles.passwordInput} placeholder="动态口令">
                {Key}
                <i
                  className={classNames('icon iconfont icon-shuaxinicon', styles.resetIcon, loading && styles.loadingIcon)}
                  onClick={onReset}
                  title={loading ? '加载中' : '重置'}
                />
              </div>
              <Space>
                <EasyvButton onClick={handleOk} theme="primary">
                  复制口令
                </EasyvButton>
              </Space>
            </div>
          </>
        }
      />
    </>
  );
}

export default ShareScreenModal;
