import { QuestionCircleOutlined } from '@easyv/react-icons';
import React, { memo } from 'react';
import { Checkbox, EasyNumber } from '@easyv/react-gui';
import { Tooltip } from '@easyv/antd';
import styles from './auto-update.less';
import { ComponentItem } from '@/models/component.types';
import isEqual from 'lodash/isEqual';
import { connect } from 'react-redux';
import { updateComponentDataConfig } from '@/models/component';

const productVersionUpdateNum = {
  saas_personal: {
    min: 30,
    name: '个人版',
  },
  saas_basic: {
    min: 30,
    name: '基础版',
  },
  saas_advanced: {
    min: 10,
    name: '高级版',
  },
  saas_vip: {
    min: 3,
    name: '尊享版',
  },
  local: {
    min: 1,
    name: '运行平台',
  },
};

const AutoUpdate = ({ productVersion, autoUpdate, componentId, updateComponentDataConfig }) => {
  const autoUpdateNum = productVersionUpdateNum[productVersion];
  return (
    <div className={styles.autoUpdate}>
      <Checkbox
        checked={autoUpdate.isAuto}
        onChange={(e) =>
          updateComponentDataConfig({
            autoUpdate: {
              ...autoUpdate,
              isAuto: e.target.checked,
            },
            id: componentId,
          })
        }>
        自动更新
      </Checkbox>
      {autoUpdate.isAuto && (
        <Tooltip
          title={
            window.appConfig.LOCAL
              ? '为保障产品使用流畅性，数据更新频率不得低于1s。'
              : '为保障产品使用流畅性，基础版、高级版、尊享版数据更新频率最小值分别为30s、10s、3s。'
          }>
          <QuestionCircleOutlined className="whiteHover" />
        </Tooltip>
      )}

      {autoUpdate.isAuto && (
        <div style={{ marginLeft: 20 }}>
          每
          <div style={{ display: 'inline-block', width: 88, marginLeft: 6, marginRight: 6 }}>
            <EasyNumber
              min={autoUpdateNum.min || 10}
              value={autoUpdate.interval}
              onChange={(value) => {
                updateComponentDataConfig({
                  autoUpdate: {
                    isAuto: autoUpdate.isAuto,
                    interval: value,
                  },
                  id: componentId,
                });
              }}
            />
          </div>
          秒请求一次
        </div>
      )}
    </div>
  );
};

const mapStateToProps = ({ componentsById, createApp, user }) => {
  const { componentsChildSelected, layersSelected } = createApp;
  const { userInfo } = user;

  const componentId = componentsChildSelected || layersSelected[0];
  const current = componentsById[componentId] as ComponentItem;

  return {
    componentId: componentId,
    autoUpdate: current.autoUpdate,
    productVersion: !window.appConfig.LOCAL ? userInfo.edition.id : 'local',
  };
};

const mapDispatchToProps = {
  updateComponentDataConfig,
};
function areEqual(props, nextProps) {
  return (
    isEqual(props.componentId, nextProps.componentId) &&
    isEqual(props.autoUpdate, nextProps.autoUpdate) &&
    isEqual(props.productVersion, nextProps.productVersion)
  );
}
export default connect(mapStateToProps, mapDispatchToProps)(memo(AutoUpdate, areEqual));
