/**
 * @description 菜单栏提示产品升级或购买modal抽离
 */
import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
import { Modal } from '@easyv/antd';
import { useSelector } from 'react-redux';
import { RootState } from 'models';
import styles from './style.less';
import appPath from '../../../images/zdjh.png';
import constantsPath from '../../../images/zjkf.png';
import cockpitPath from '../../../images/jsc.png';
import { CloseOutlined } from '@ant-design/icons';
import { redirectToUpgrade } from 'utils/utils';
import { useProductionInfo } from 'components/easyUse';

const descList = {
  app: {
    imgSrc: appPath,
    title: '移动终端远程操控',
    text1: '通过点选的方式对可视化应用进行绑定，',
    text2: '一种无需配置的现代化构建方式，实现快速开发自定义组件。'
  },
  constants: {
    imgSrc: constantsPath,
    title: '自定义组件开发平台',
    text1: '提供easyv官方组件工具包，',
    text2: '可一键切换可视化应用，支持自定义上传企业LOGO'
  },
  cockpit: {
    imgSrc: cockpitPath,
    title: '驾驶舱让数据价值看得见',
    text1: '独立的企业驾驶舱视图，充满科技感的应用空间；',
    text2: '可一键切换可视化应用，支持自定义上传企业LOGO'
  }
};

interface ProductPermissionModalProps {
  renderType?: 'default'; // 续可以将平台其他权限弹出modal的样式集中到这里来处理
}

interface ProductPermissionModalRef {
  show: (functionName: 'app' | 'constants' | 'cockpit', targetVersion: 'saas_vip' | 'saas_advanced') => void;
  close: () => void;
}

const ProductPermissionModal = forwardRef<ProductPermissionModalRef, ProductPermissionModalProps>((props, ref) => {
  const [visible, setVisible] = useState<boolean>(false);
  const [functionName, setFunctionName] = useState<'app' | 'constants' | 'cockpit'>('app');
  const [targetVersion, setTargetVersion] = useState<'saas_vip' | 'saas_advanced'>();
  const {
    userInfo: { skuId }
  } = useSelector((state: RootState) => state.user);
  const isBuy = skuId && skuId > 3;
  const productionInfo = useProductionInfo();
  const { isRenew = false } = productionInfo;

  useImperativeHandle(ref, () => ({
    show: (e, v) => {
      setFunctionName(e);
      setTargetVersion(v);
      setVisible(true);
    },
    close: () => {
      setVisible(false);
    }
  }));

  return (
    <Modal
      className={styles.productModalWrapper}
      width={520}
      title={null}
      footer={null}
      closable={false}
      onCancel={() => setVisible(!visible)}
      visible={visible}>
      <div className={styles.productModalContent}>
        <div className={styles.imgWrapper}>
          <img src={descList[functionName].imgSrc} />
          <CloseOutlined className={styles.closeIcon} onClick={() => setVisible(!visible)} />
        </div>

        <div className={styles.footerWrapper}>
          <div className={styles.desc}>
            <p className={styles.title}>{descList[functionName].title}</p>
            <div>
              <p className={styles.text}>{descList[functionName].text1}</p>
              <p className={styles.text}>{descList[functionName].text2}</p>
            </div>
          </div>
          {isRenew ? (
            <div className={styles.tip}>该资源仅Renew开发版可用，可升级线下企业版至开发版进行体验</div>
          ) : (
            <div
              className={styles.btn}
              onClick={() => {
                redirectToUpgrade(skuId!, targetVersion);
              }}>
              {isBuy ? '去购买' : '去升级'}
            </div>
          )}
        </div>
      </div>
    </Modal>
  );
});

export default ProductPermissionModal;

export const useProductPermissionModalRef = () => {
  return useRef<ProductPermissionModalRef>(null);
};
