import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import styles from './index.less';
import { Checkbox } from '@easyv/antd';
import EasyvButton from 'components/EasyvButton';
import EasyvModal, { useConfirmRef } from 'components/EasyvModal';
import { useLocalStorage } from 'components/easyUse';

const PlatformMigrateModal = (Iprops) => {
  const { deadline, children } = Iprops;
  const [isRead, setRead] = useState(false);
  const modalRef = useConfirmRef();
  const [state, setState] = useLocalStorage('migrate');

  useEffect(() => {
    if (deadline && (!state || state !== deadline)) {
      modalRef.current?.show();
    }
  }, []);

  const showModal = () => {
    modalRef.current?.show();
  };

  const onAgain = () => {
    modalRef.current?.close();
    setState(deadline);
    setRead(false);
  };

  const onChange = () => {
    isRead ? setRead(false) : setRead(true);
  };

  const ConfirmTip = () => (
    <div className={styles.legal}>
      提供easyv官方组件工具包，一种无需配置的现代化构建方式，实现快速开发自定义组件。提供easyv官方组件工具包，一种无需配置的现代化构建方式，实现快速开发自定义组件。开发自定义组件。提供easyv官方组件工具包，一种无需配置的现代化构建方式，实现快速开发自定义组件实现快速开发自定义组件。开发自定义组件。提供easy现代化构建方式，实现快速开发自定义组件实现快速开发自定义组件。开发自定义组件。提供easy现代化构建方式，实
    </div>
  );

  const TipFooter = () => (
    <div className={styles.footer}>
      <Checkbox checked={isRead} onChange={onChange}>
        <span className={styles.check}>已阅读</span>
      </Checkbox>
      <EasyvButton onClick={onAgain} theme="primary" disabled={!isRead}>
        关闭
      </EasyvButton>
    </div>
  );

  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center' }} onClick={showModal}>
        {children}
      </div>
      <EasyvModal.Confirm title="迁移重要说明" width={530} maxHeight={256} content={<ConfirmTip />} ref={modalRef} footer={<TipFooter />} />
    </div>
  );
};

function mapStateToProps(state) {
  const { transfer } = state;
  return {
    deadline: transfer.deadline
  };
}

export default connect(mapStateToProps)(PlatformMigrateModal);
