import { h, Component } from 'preact';

import styles from './css/bp.less';

export class BpInfo extends Component<any, any> {
  render() {
    const { bpInfo: bpInfoProps } = this.props;
    let bpInfo = [
      {
        blueTeam: {
          desc: '',
          isBan: false,
        },
        redTeam: {
          desc: '禁1人',
          isBan: true,
        },
      },
      {
        blueTeam: {
          desc: '禁1人',
          isBan: true,
        },
        redTeam: {
          desc: '',
          isBan: false,
        },
      },
      {
        blueTeam: {
          desc: '选1人',
          isBan: false,
        },
        redTeam: {
          desc: '',
          isBan: false,
        },
      },
    ];

    if (bpInfoProps) {
      bpInfo = bpInfoProps;
    }

    return (
      <div className={styles['bp-wrap']}>
        <div className={styles['bp-title']}>
          <div className={styles['bp-order']}>次序</div>
          <div className={styles['bp-name']}>蓝方</div>
          <div className={styles['bp-name']}>红方</div>
        </div>
        <div className={styles['bp-list']}>
          {bpInfo.map((item, index) => (
            <div
              key={index}
              className={styles['bp-item']}
            >
              <div className={styles['bp-queue']}>{index + 1}</div>
              <div
                className={`${styles['bp-text']} ${
                  item.blueTeam.isBan ? styles['bp-red'] : ''
                }`}
              >
                {item.blueTeam.desc}
              </div>
              <div
                className={`${styles['bp-text']} ${
                  item.redTeam.isBan ? styles['bp-red'] : ''
                }`}
              >
                {item.redTeam.desc}
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }
}
export default BpInfo;