import { observer } from 'mobx-preact';
import { h } from 'preact';

import { useState } from 'preact/hooks';

import CdnImage  from '../cdn-image/cdn-image';
import { gImg } from '../common/i18n/image';
import { $t } from '../locale';
import PMGPopupContainer from '../pmg-popup-container/pmg-popup-container';

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

const teamLogoDefault = gImg('https://cdn.partner.esports.pubgmobile.com/os-pubgm/en/pix/comp/team-logo-default.png');


const PMGModifyLogoDialog = (props: any) => {
  const { onClickClose, selectedLogo, onClickConfirm, onClickAI, aiText = $t('AI自定义'), confirmText = $t('确定'), title = $t('修改队徽'), logoList, showAI } = props;

  const originIndex = logoList.findIndex(item => item.logo === selectedLogo);
  const [teamLogoIndex, setTeamLogoIndex] = useState(Math.max(0, originIndex));
  const onClickLogo = (logo, index) => {
    setTeamLogoIndex(index);
    props.onClickLogo?.(logo, index);
  };

  console.log('teamLogoIndex', teamLogoIndex, logoList);
  return (
    <PMGPopupContainer
      size="normal"
      titleColor='#fff'
      title={title}
      confirmText={confirmText}
      onClickClose={onClickClose}
      onClickConfirm={() => onClickConfirm(teamLogoIndex)}
      btnGroupStyle={{ marginBottom: '.44rem' }}
    >
      <div className={styles['pmg-modify-logo-dialog']}>
        {logoList?.length > 0 && (
          <div className={styles['pmg-team-logo-list']}>
            {logoList?.map((item, index) => (
              <div
                className={`${styles['pmg-team-logo-item']} ${teamLogoIndex === index ? styles['pmg-active'] : ''}`}
                key={`key-${index}`}
                onClick={() => onClickLogo(item, index)}
              >
                <CdnImage
                  className={styles['pmg-team-logo']}
                  src={item?.logo || teamLogoDefault}
                  alt="team-logo"
                />
              </div>
            ))}
            {showAI && (
            <div
              className={`${styles['pmg-team-logo-item']} ${styles['pmg-ai']}`}
              onClick={onClickAI}
            >
              <div className={styles['pmg-team-logo-ai']}></div>
              <text className={styles['pmg-team-logo-text']}>{aiText}</text>
            </div>
            )}
          </div>
        )}
      </div>
    </PMGPopupContainer>
  );
};


export default observer(PMGModifyLogoDialog);