import React, { memo, useState, useEffect } from 'react';
import classNames from 'classnames';
import styles from './TenantSelectModal.less';

function TenantSelectModal({ visible, data, current, onClose, onSelect, getTenantList }) {
  const [selectId, setSelectId] = useState(null);

  useEffect(() => {
    setSelectId(current);
  }, [current, visible]);

  useEffect(() => {
    if (!data.length) {
      getTenantList();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [visible, data]);

  const handleClick = (id) => {
    setSelectId(id);
  };

  const handleSelect = () => {
    onSelect(selectId);
  };

  return (
    <div className={classNames(styles.container, { [styles.active]: visible })}>
      <div className={styles.modal}>
        <div className={styles.header}>
          <span className={styles.cancel} onClick={onClose}>
            取消
          </span>
          <span className={styles.name}>切换租户</span>
          <span className={styles.confirm} onClick={handleSelect}>
            完成
          </span>
        </div>
        <ul className={styles.list}>
          {data.map((d) => (
            <li key={d.id} className={classNames(styles.item, { [styles.active]: selectId == d.id })} onClick={() => handleClick(d.id)}>
              {d.name}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default memo(TenantSelectModal);
