import React from 'react';
import { connect } from 'react-redux';
import { useHistory } from 'react-router-dom';
import { Tooltip } from '@easyv/antd';
import { selectComponentWithId } from 'models/create-app';
import styles from './UsedCondition.less';

function UsedCondition({
  usedComponents = [],
  selectComponentWithId
}: {
  usedComponents: any;
  selectComponentWithId: (id, history) => any;
}) {
  const history = useHistory();
  if (!usedComponents.length) {
    return null;
  }

  const content = (
    <div>
      {usedComponents.map((d) => {
        return (
          <div
            key={d.id}
            className={styles.item}
            onClick={(e) => {
              e.stopPropagation();
              selectComponentWithId(d.id, history);
            }}>
            <i className={styles.circle} />
            <span className={styles.name}>
              {d.name}_{d.id}
            </span>
          </div>
        );
      })}
    </div>
  );

  return (
    <Tooltip title={content}>
      {' '}
      <span className={styles.container} onClick={(e) => e.stopPropagation()}>
        <b className={styles.count}>{usedComponents.length}</b>个组件正在使用{' '}
      </span>
    </Tooltip>
    // <Popover overlayClassName="dark" overlayStyle={{ width: 180 }} content={content} placement="bottom">
    //   <span className={styles.container} onClick={(e) => e.stopPropagation()}>
    //     <b className={styles.count}>{usedComponents.length}</b>个组件正在使用
    //   </span>
    // </Popover>
  );
}

const mapDispatchToProps = {
  selectComponentWithId
};

export default connect(null, mapDispatchToProps)(UsedCondition);
