import React from 'react';
import { connect } from 'react-redux';
import classNames from 'classnames';
import { resetChildSelect } from 'models/create-app';
import { upgradeComponent } from 'models/component';
import EasyvModal, { useConfirmRef } from 'components/EasyvModal';
import styles from './index.less';
import { isLowVersion } from 'utils/utils';

function ComponentInfo({
  id,
  name,
  version,
  latestVersion,
  isChild,
  constantName,
  courseUrl,
  backToComponent,
  upgradeComponent,
  baseName
}) {
  const updateRef = useConfirmRef();
  return (
    <div>
      <div className={styles.container}>
        <div className={styles.info}>
          {isChild && (
            <span className={styles.parent} onClick={backToComponent}>
              <i className="icon iconfont icon-btn_arrowsleft" />
            </span>
          )}
          <span className={classNames({ [styles.childName]: isChild })} style={{ display: 'flex', alignItems: 'center' }}>
            <span className={styles.name} title={name}>
              {name}
            </span>
            _<span>{id}</span>
            {courseUrl && (
              <a className={styles.courseUrl} href={courseUrl} target="_blank" rel="noopener">
                查看教程
              </a>
            )}
          </span>
        </div>
        {!isChild && isLowVersion(version, latestVersion) && (
          <div className={styles.upgrade} onClick={() => updateRef.current?.show()}>
            更新版本
          </div>
        )}
      </div>
      <div className={styles.subInfo}>
        <span>v{version}</span> | <span>{constantName || baseName}</span>
      </div>
      <EasyvModal.Confirm
        iconType="info"
        onOkBtnType="primary"
        onOk={() => {
          upgradeComponent(id);
          updateRef.current?.close();
        }}
        title="更新组件"
        ref={updateRef}
        content="更新组件有可能导致组件不可用，是否确定要更新？"
      />
    </div>
  );
}

const mapStateToProps = ({ createApp, componentsById, constants, mobileConstants, tenantConstants }) => {
  const { layersSelected, componentsChildSelected } = createApp;
  const isChild = !!componentsChildSelected;
  const componentId = isChild ? componentsChildSelected : layersSelected[0];
  const component = componentsById[componentId];
  const { id, base, name } = component;
  const isMobileScreen = /\/app\/edit\/[0-9]+?\/[0-9]+?$/.test(window.location.pathname);
  let currentConstants = isMobileScreen ? mobileConstants.list : constants.list;
  currentConstants = currentConstants.concat(tenantConstants.list);
  const constant = (!componentsChildSelected && currentConstants.find((d) => d.moduleName === base.module_name)) || {};

  return {
    id,
    isChild,
    version: base.version,
    latestVersion: constant.version,
    name: name,
    baseName: base.name || name, //向下兼容，旧的大屏取的name，旧的取base.name,组件初始化添加时的名字
    constantName: constant.name,
    courseUrl: constant.courseUrl
  };
};

const mapDispatchToProps = {
  backToComponent: resetChildSelect,
  upgradeComponent: upgradeComponent
};

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