import React, { useState, useEffect } from 'react';
import styles from './warn.less';
import { Modal } from '@easyv/react-gui';
import { InfoCircleFilled, CloseOutlined } from '@ant-design/icons';
import classnames from 'classnames';

function Warn() {
  const [visible, setVisible] = useState(false);
  const onClose = () => {
    setVisible(false);
  };

  useEffect(() => {
    const no_longer_remind = localStorage.getItem('noLongerRemind'); // 不再提醒 本地标识
    setVisible(!no_longer_remind);
  }, []);

  return (
    <div className={styles.warnBox}>
      <Modal wrapClassName={styles.wrap} maskClosable={false} visible={visible} closable={false} footer={null} onCancel={onClose}>
        <div className={styles.content}>
          <div className={styles.details}>
            <InfoCircleFilled className={styles.icon} />
            <p>
              升级为
              <a target="_blank" href={`${window.appConfig.HOME_URL}/price`}>
                正式版本
              </a>
              前，预览项目时会显示水印
            </p>
          </div>
          <div className={styles.close}>
            <a
              onClick={() => {
                localStorage.setItem('noLongerRemind', '1');
                onClose();
              }}>
              不再提醒
            </a>
            <CloseOutlined onClick={onClose} className={classnames(styles.icon, styles.cursor)} />
          </div>
        </div>
      </Modal>
    </div>
  );
}

export default Warn;
