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

import CdnImage from '../cdn-image/cdn-image';

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

// SchePage 框架组件的 Props
export interface SchePageProps {
  children?: ComponentChildren; // 插槽内容
  title?: string; // 标题
  typeTabs?: { name: string; value: string }[]; // 赛程类型tab列表
  activeTab?: string; // 当前赛程类型
  onTabChange?: (tab: string) => void; // tab 切换回调
  myScheNum?: number; // 我的赛程数量
  showMySche?: boolean; // 是否显示我的赛程
  showMyScheBorder?: boolean; // 是否显示我的赛程边框
  onMyScheClick?: () => void; // 我的赛程点击回调
  onBackClick?: () => void; // 返回按钮点击回调
  showSubscribe?: boolean; // 是否显示订阅比赛
  onSubscribeClick?: () => void; // 订阅比赛点击回调
  subscribeStatus?: 'subscribed' | 'unsubscribed'; // 订阅比赛状态
  battleNavList?: { id: number; title: string }[]; // 比赛导航列表
  activeIndex?: number; // 当前比赛导航索引
  navClick?: (id: number) => void; // 比赛导航点击回调
  groupTabs?: { value: number; title: string }[]; // 分组tab列表
  activeGroupTab?: number; // 当前分组tab索引
  onGroupTabChange?: (value: number) => void; // 分组tab点击回调
}

class SchePage extends Component<SchePageProps> {
  render() {
    const {
      children,
      title = '我的赛程',
      typeTabs = [],
      activeTab = 'main',
      onTabChange,
      myScheNum,
      showMySche,
      onMyScheClick,
      showMyScheBorder,
      onBackClick,
      showSubscribe,
      onSubscribeClick,
      subscribeStatus,
      battleNavList = [],
      activeIndex = 0,
      navClick,
      groupTabs = [],
      activeGroupTab = 1,
      onGroupTabChange,
    } = this.props;

    return (
      <div className={styles['sche-page']}>
        <div className={`${styles['sche-page-wrap']} ${battleNavList?.length > 0 ? styles['sche-page-wrap-nav'] : ''}`} >
          {/* 顶部标题和切换我的赛程按钮 */}
          <div className={styles.header}>
            <div className={styles['header-left']}>
              <div
                className={styles['btn-back']}
                onClick={onBackClick}
              />
              <div className={styles.title}>{title}</div>
            </div>
            {showMySche && (
            <div
              className={`${styles['btn-my-sche']} ${showMyScheBorder ?  styles['btn-my-sche-border'] : ''}`}
              onClick={onMyScheClick}
            >
              <div className={styles['btn-my-sche-text']}>我的赛程：当前至少还有<text className={styles['btn-my-sche-text-number']}>{myScheNum}</text>场比赛
                {showMyScheBorder && (
                <CdnImage
                  className={styles['btn-my-sche-icon']}
                  src="https://image-1251917893.file.myqcloud.com/Esports/schedule/next-icon.png"
                />
                )}
              </div>
            </div>
            )}
            {showSubscribe && (
            <div
              className={styles['btn-my-sche']}
              onClick={onSubscribeClick}
            >
              <div className={styles['btn-my-sche-text']}>
                <CdnImage
                  className={styles['btn-subscribe-icon']}
                  src={subscribeStatus === 'subscribed' ? 'https://image-1251917893.file.myqcloud.com/Esports/schedule/subscribe-icon.png' : 'https://image-1251917893.file.myqcloud.com/Esports/schedule/unsubscribe-icon.png'}
                />
                {subscribeStatus === 'subscribed' ? '订阅比赛' : '取消订阅'}
              </div>
            </div>
            )}
          </div>
          <div className={styles['sche-tree-content-wrap']}>
            {/* 侧边栏 */}
            {battleNavList?.length > 0 && (
            <div className={styles['reward-page-bar']}>
              {battleNavList?.map((item, index) => (
                <div
                  key={index}
                  className={`${styles['reward-page-bar-item']} ${activeIndex === item.id ? styles['item-active'] : ''}`}
                  onClick={() => navClick?.(item.id)}
                ><text className={styles['reward-page-bar-text']}> {item.title}</text>
                </div>
              ))}
            </div>
            )}
            <div className={styles['tab-switch-right']}>
              {/* 赛程分类tab切换 */}
              {typeTabs.length > 0 && (
              <div className={styles['tab-switch-wrap']}>
                <div className={styles['tab-switch']}>
                  {typeTabs.map(tab => (
                    <div
                      key={tab.value}
                      className={`${styles['tab-item']} ${activeTab === tab.value ? styles['tab-active'] : ''}`}
                      onClick={() => onTabChange?.(tab.value)}
                    >
                      <text className={styles['tab-item-text']}>{tab.name}</text>
                    </div>
                  ))}
                </div>
              </div>
              )}
              {/* 分组tab */}
              {groupTabs.length > 0 && (
              <div className={styles['group-tab-switch-wrap']}>
                <div className={styles['group-tab-switch']}>
                  {groupTabs.map(tab => (
                    <div
                      key={tab.value}
                      className={`${styles['group-tab-item']} ${activeGroupTab === tab.value ? styles['group-tab-active'] : ''}`}
                      onClick={() => onGroupTabChange?.(tab.value)}
                    >
                      <text className={styles['group-tab-item-text']}>{tab.title}</text>
                    </div>
                  ))}
                </div>
              </div>
              )}
              {/* 插槽内容区域 */}
              {children}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default SchePage;