import React, { useState } from 'react';
import styles from './index.less';
import { connect } from 'react-redux';
import { updateVersion } from 'models/updateVersion';
import { updateVersionTypes } from 'models/updateVersion.types';
import { redirectToUpgrade } from 'utils/utils';
import classnames from 'classnames';
import { Modal } from '@easyv/antd';
import { useProductionInfo } from 'components/easyUse';
import { DoubleRightOutlined } from '@easyv/react-icons';
import PersonalModal from '../PersonalModal';

function UpdateVersionModal({ updateData, updateVersion, skuId }: { updateData: updateVersionTypes; updateVersion: any; skuId: number }) {
  const update = () => {
    redirectToUpgrade(skuId, updateData.targetVersion); // 路由跳转
    updateVersion({ ...updateData, show: false }); // 关闭升级modal
  };

  const productionInfo = useProductionInfo();
  const { isRenew } = productionInfo;
  const [visible, setVisible] = useState(false);

  const format = (time, format) => {
    const d = new Date(time);
    const o = {
      'M+': d.getMonth() + 1, //month
      'd+': d.getDate(), //day
      'h+': d.getHours(), //hour
      'm+': d.getMinutes(), //minute
      's+': d.getSeconds(), //second
      'q+': Math.floor((d.getMonth() + 3) / 3), //quarter
      S: d.getMilliseconds() //millisecond
    };
    if (/(y+)/.test(format)) format = format.replace(RegExp.$1, (d.getFullYear() + '').substr(4 - RegExp.$1.length));
    for (const k in o)
      if (new RegExp('(' + k + ')').test(format))
        format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
    return format;
  };
  const isBuy = skuId > 3; //新购 is 升级 - 试用版新购，正式版，升级
  const targerVersionName = skuId === 7 ? '高级版试用' : updateData.targetVersion === 'saas_vip' ? '尊享版' : '高级版';
  const isShow = skuId === 7;

  const versionProbation = () => {
    updateVersion({ ...updateData, show: false });
    setVisible(true);
  };

  return (
    <div className={classnames(styles.wrap, styles['black'])}>
      <Modal
        title={isRenew ? '温馨提示' : `${isBuy ? '升级到' : '购买'}${targerVersionName}`}
        width={400}
        getContainer={false}
        onCancel={() => {
          updateVersion({ ...updateData, show: false });
        }}
        visible={updateData.show}
        footer={null}>
        {isRenew ? (
          <div className={styles.box}>
            <p>当前已开通Renew企业版，到期时间为{format(updateData.endDate, 'yyyy年MM月dd日')} </p>
            <br />
            <p className={styles.tip}>该资源仅Renew开发版可用，可升级线下企业版至开发版进行体验</p>
          </div>
        ) : (
          <div className={styles.box}>
            <p>
              当前已开通{updateData.currentVersion}，到期时间为{format(updateData.endDate, 'yyyy年MM月dd日')}{' '}
            </p>
            <p style={{ color: '#B4B7C1' }}>
              该资源需{isBuy ? '升级到' : '购买'}
              <span style={{ color: '#fff' }}>{targerVersionName}可用</span>
              {isShow && <span>，点击申请即可开启{targerVersionName}</span>}
            </p>
            <br />
            <br />
            <div className={styles.footer}>
              <a href={`${window.appConfig.HOME_URL}/price`}>
                版本功能对比{' '}
                <DoubleRightOutlined
                  style={{
                    verticalAlign: 'middle',
                    lineHeight: 1
                  }}
                />
              </a>
              {isShow ? (
                <div>
                  <span className={styles.probation} onClick={versionProbation}>
                    免费试用 {''}
                  </span>
                  <span className={styles.button} style={{ marginLeft: '10px' }} onClick={update}>
                    立即升级 {''}
                  </span>
                </div>
              ) : (
                <span className={styles.button} onClick={update}>
                  立即{isBuy ? '升级' : '购买'} {''}
                </span>
              )}
            </div>
          </div>
        )}
      </Modal>
      <PersonalModal visible={visible} changeVisible={setVisible} />
    </div>
  );
}

const mapStateToProps = ({ updateVersion, user }) => {
  return {
    skuId: user.userInfo?.skuId,
    updateData: updateVersion?.data
  };
};
const mapDispatchToProps = {
  updateVersion
};

export default connect(mapStateToProps, mapDispatchToProps)(UpdateVersionModal);
