import { h, Component } from 'preact';

import CdnImage from '../cdn-image/cdn-image';
import PopupContainer from '../popup-container/popup-container';

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

interface AddGroupItem {
  img: string;
  name: string;
}

interface Props {
  onClickClose?: () => void;
  onClickConfirm?: () => void;
  title?: string;
  titleTips?: string;
  addGroupList?: AddGroupItem[];
  confirmText?: string;
}

const ALL_ICON = {
  groupAward: {
    img: 'https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/add-group1.png',
    name: '群内领奖',
  },
  remindCompete: {
    img: 'https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/add-group2.png',
    name: '提醒参赛',
  },
  refereePenalty: {
    img: 'https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/add-group3.png',
    name: '裁判判罚',
  },
  qualification: {
    img: 'https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/add-group4.png',
    name: '资格认证',
  },
  matchCommunication: {
    img: 'https://image-1251917893.file.myqcloud.com/Esports/pix/img/solo/add-group5.png',
    name: '比赛沟通',
  },
};
const ADD_GROUP_LIST = [
  ALL_ICON.groupAward,
  ALL_ICON.remindCompete,
  ALL_ICON.refereePenalty,
];

export default class PopupAddGroup extends Component<Props, any> {
  render() {
    const {
      onClickClose,
      onClickConfirm,
      title = '加群提示',
      titleTips = '为了保证你的参赛体验，请你加入官方主理人群',
      confirmText = '去加入',
      addGroupList = ADD_GROUP_LIST,
    } = this.props;


    return (
      <PopupContainer
        title={title}
        size='small'
        confirmText={confirmText}
        onClickClose={onClickClose}
        onClickConfirm={onClickConfirm}
      >
        <div className={styles['add-group-tips']}>
          {titleTips}
        </div>
        <div className={styles['add-group-list']}>
          {addGroupList.map((value, index) => (
            <div
              key={index}
              className={styles['add-group-item']}
            >
              <div className={styles['add-group-img-box']}>
                <CdnImage
                  className={styles['add-group-img']}
                  src={value.img}
                />
              </div>
              <div className={styles['add-group-name']}>
                {value.name}
              </div>
            </div>
          ))}
        </div>
      </PopupContainer>
    );
  }
}