import React, { ReactNode, useMemo } from 'react';
import styles from './HeaderCard.less';
import { connect } from 'react-redux';
import { RightOutlined } from '@ant-design/icons';
import GalleryApp from 'containers/interaction-edit/Header/Gallery';
import Gallery from './Gallery';
import TenantConstants from './TenantConstants';
import MaterialLib from './resource/MaterialLib';
import classnames from 'classnames';
import { Link } from 'react-router-dom';

function HeaderCard({ activatedState, editionType, theFirstColumn }: { theFirstColumn: any; activatedState: string; editionType: string }) {
  const componentAddable = editionType !== 'education';
  const enableTenantConstant = editionType === 'community' || editionType === 'lifelong' || editionType === 'saas_vip';
  const MaterialLibs = <>{...theFirstColumn.map((d) => <MaterialLib item={d} key={d.id} />)}</>;
  const isAppEditPage = /\/app\/edit\/*/.test(window.location.pathname);

  const isCard = ['组件', '资源'].includes(activatedState);

  return (
    <div className={styles.headerCard} style={{ display: isCard ? 'block' : 'none' }}>
      <div className={styles.content}>
        <span style={{ display: isAppEditPage && activatedState === '组件' ? 'block' : 'none', height: '100%' }}>
          <GalleryApp />
        </span>
        <span style={{ display: !isAppEditPage && activatedState === '组件' ? 'block' : 'none', height: '100%' }}>
          <span className={styles.item}>{componentAddable && <Gallery />}</span>
          <span className={styles.item}>{enableTenantConstant && <TenantConstants />}</span>
        </span>
        <span style={{ display: !isAppEditPage && activatedState === '资源' ? 'block' : 'none', height: '100%' }}>{MaterialLibs}</span>
      </div>
      {activatedState === '资源' && (
        <Link to={'/resource'} className={classnames(styles.link)}>
          资源中心
          <RightOutlined style={{ fontSize: 11 }} />
        </Link>
      )}
    </div>
  );
}

const mapStateToProps = ({ screenDetail, user, materialLib }) => {
  const { activatedState } = screenDetail;
  const { userInfo } = user;
  const { theFirstColumn } = materialLib;

  return {
    activatedState,
    theFirstColumn,
    editionType: userInfo.type
  };
};

export default connect(mapStateToProps)(HeaderCard);
