import React, { useState } from 'react';
import { connect, useDispatch } from 'react-redux';
import styles from './index.less';
import { Checkbox } from '@easyv/antd';
import EasyvButton from 'components/EasyvButton';
import { useLocalStorage } from 'components/easyUse';
import { getTransferinfo } from 'models/transfer';
import moment from 'moment';
import { useHistory } from 'react-router-dom';
import { postTransferring } from '@/services/transfer';

const PlatformMigratePage = (Iprops) => {
  const { deadline } = Iprops;
  const [step, setStep] = useState(1);
  const [isRead, setRead] = useState(false);
  const [_MigrateTime, setMigrateTime] = useLocalStorage('migrate');

  const dispatch = useDispatch();

  const history = useHistory();

  const submitStep = () => {
    setStep(2);
  };

  const submitMigrate = async () => {
    const result = await postTransferring();
    if (result) {
      dispatch(getTransferinfo());
      setRead(false);
      setMigrateTime(moment(result.deadline).format('YYYY-MM-DD HH:mm:ss'));
    }
  };

  const onCancel = () => {
    history.push('/');
    setStep(1);
    setRead(false);
  };

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

  const Migrate = () => (
    <div>
      注意：该功能为迁移服务，使用后，平台将在3天内自动失效，数据将被销毁。确认后开始数据迁移,请在规定时间内将「我的应用」、「我的数据」、「终端数据」、「组件开发」、「资源中心」等数据备份
    </div>
  );

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

  const TipFooter = () => (
    <div className={styles.footer}>
      <Checkbox checked={isRead} onChange={onChange}>
        <span className={styles.check}>已阅读</span>
      </Checkbox>
      <span>
        <EasyvButton style={{ marginRight: 12 }} onClick={onCancel} theme="default">
          取消
        </EasyvButton>
        <EasyvButton onClick={submitStep} theme="primary" disabled={!isRead}>
          确认
        </EasyvButton>
      </span>
    </div>
  );

  const MigrateFooter = () => (
    <div className={styles.footer}>
      <div className={styles.warning}>本操作不可逆请慎重操作</div>
      <div>
        <EasyvButton theme="default" onClick={onCancel} style={{ marginRight: 12 }}>
          取消
        </EasyvButton>
        <EasyvButton theme="danger" onClick={submitMigrate}>
          开始迁移
        </EasyvButton>
      </div>
    </div>
  );

  return (
    <div className={styles.transfer}>
      {deadline ? (
        <div className={styles.container}>
          <p className={styles.title}>迁移开始</p>
          <div className={styles.content}>迁移流程已开始，请返回首页</div>
          <div className={styles.footer} style={{ justifyContent: 'end' }}>
            <EasyvButton style={{ marginRight: 12 }} theme="primary" onClick={onCancel}>
              确认
            </EasyvButton>
          </div>
        </div>
      ) : (
        <div className={styles.container}>
          <p className={styles.title}>{step === 1 ? '迁移重要说明' : '平台迁移'}</p>
          <div className={styles.content}>{step !== 2 ? <ConfirmTip /> : <Migrate />}</div>
          {step === 1 ? <TipFooter /> : <MigrateFooter />}
        </div>
      )}
    </div>
  );
};

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

export default connect(mapStateToProps)(PlatformMigratePage);
