import { h, Component, CSSProperties } from 'preact';

import { $t } from '../locale';
import PMGButton from '../pmg-button/pmg-button';

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

class PMGSwitchLanguage extends Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      selectIndex: 0,
    };
  }

  onClickSwitch = (value, index) => {
    // 禁止点击
    if (value.isDisable) {
      return;
    }
    this.setState({
      selectIndex: index,
    });
    if (this.props.onClickSwitch) {
      this.props.onClickSwitch(value, index);
    }
  };

  formatSelectedText = (selectedLength: number, maxSelectNum: number): string => {
    const template = $t('已选择（{{0}}/{{1}}）', { 0: selectedLength, 1: maxSelectNum });

    // 兜底处理：如果模板替换失败，手动替换
    let result = template;
    if (result.includes('{{0}}')) {
      result = result.replace('{{0}}', String(selectedLength));
    }
    if (result.includes('{{1}}')) {
      result = result.replace('{{1}}', String(maxSelectNum));
    }

    return result;
  };

  render() {
    // title: '语言选择',
    // languageList: [] 语言列表,
    // selectNum: 0, 选择数量,
    // maxSelectNum: 3, 最大选择数量,
    // selectedLanguage: '简体中文', 选择语言,
    // showSelectLanguage: false, 是否显示选择语言,
    // onClickConfirm: () => {}, 确认按钮点击事件,
    // onClickClose: () => {}, 关闭按钮点击事件,

    const { title, languageList, maxSelectNum = 3, selectedLanguage = [],  showSelectLanguage = false, placeholderNum = 9, onClickConfirm, onClickClose } = this.props;

    const overflowStyle: CSSProperties = {
      overflowStyle: 'none',
    };

    const selectedText = this.formatSelectedText(selectedLanguage.length, maxSelectNum);

    return (
      <div
        className={styles['pmg-switch-language']}
      >
        <div className={styles['pmg-language-head']}>
          <text className={styles['pmg-language-title']}>{title}</text>
          <div
            className={styles['pmg-btn-close']}
            onClick={onClickClose}
          >
          </div>
        </div>
        <div className={styles['pmg-language-content']}>
          <div className={`${styles['pmg-language-left']} ${!showSelectLanguage ? styles['pmg-active'] : ''}`}>
            {showSelectLanguage && (
            <div className={styles['pmg-language-select']}>
              <text className={styles['pmg-language-select-text']}>
                {selectedText}：{selectedLanguage.map(item => item.name).join(', ')}
              </text>
            </div>
            )}
            <div
              className={styles['pmg-language-list']}
              style={overflowStyle}
            >
              {
                languageList.map((value, index) => (
                  <div
                    key={`key-${index}`}
                    className={`${styles['pmg-language-item']} ${selectedLanguage.find(item => item.name === value.name) ? styles['pmg-language-item-selected'] : ''} ${value.isDisable ? styles['pmg-language-item-disable'] : ''}`}
                    onClick={() => this.onClickSwitch(value, index)}
                  >
                    <text className={styles['pmg-language-item-text']}>{value.name}</text>
                  </div>
                ))
              }
              {
                Array.from({ length: placeholderNum }, (_, index) => (
                  <div
                    key={`placeholder-${index}`}
                    className={styles['pmg-language-placeholder-item']}
                  >
                  </div>
                ))
              }
            </div>
          </div>
          <div
            className={styles['pmg-btn-confirm']}
            onClick={() => onClickConfirm(languageList[this.state.selectIndex])}
          >
            <PMGButton
              type="primary"
              size="medium"
              text={$t('确定')}
              onClick={() => onClickConfirm(languageList[this.state.selectIndex])}
            />
          </div>
          {/* 底纹：解决RTL伪元素::after渲染异常 */}
          <div className={styles['pmg-language-content-texture']}></div>
        </div>
      </div>
    );
  }
}

export default PMGSwitchLanguage;