import { h, CSSProperties  } from 'preact';
import { useState, useCallback, useRef } from 'preact/hooks';


import CdnImage from '../cdn-image/cdn-image';
import { useLoadMore } from '../common/hooks/use-load-more/index';

import { $t } from '../locale';
import PMGDropDown from '../pmg-drop-down/pmg-drop-down';

import PMGEmpty from '../pmg-empty/pmg-empty';

import HistoryItem from './component/history-item/history-item';
import MatchingItem from './component/matching-item/matching-item';
import SideTab from './component/side-tab/side-tab';
import styles from './css/index.less';

const PMGMyMatch = (props: any) => {
  const overflowStyle: CSSProperties = {
    overflowStyle: 'none',
  };

  const {

    // 数据列表
    matchingList, // 进行中赛事列表
    historyList, // 历史比赛赛事列表

    // 用户信息
    myInfo, // 我的头部信息

    // 筛选相关
    typeList, // 筛选赛事类型
    typeValue, // 当前选中赛事类型
    orderList, // 筛选排序
    orderValue, // 当前排序

    // 时间相关
    startTime, // 开始时间
    endTime, // 结束时间

    // 回调函数
    onClickStartTime, // 点击开始时间
    onClickEndTime, // 点击结束时间
    onSelectType, // 选择赛事类型
    onSelectOrder, // 选择排序
    onClickBack, // 点击返回
    onClickTabSide, // 点击侧边栏标签
    onClickMatching, // 点击进行中赛事
    onClickHistory, // 点击历史赛事

    // 时间筛选相关
    timeFilterList = [$t('近一周'), $t('近一个月'), $t('近三个月')], // 时间筛选列表，提供默认值
    selectedTimeFilterIndex = 0, // 当前选中的时间筛选索引，提供默认值（默认选中"近一周"）
    onClickTimeFilterTab, // 点击时间筛选tab的回调（传入索引和值）

    // 侧边栏数据
    tabSideBarList, // 侧边栏标签列表
    emptyImg, // 空数据图片
    emptyText, // 空数据文案
    emptyBtnText, // 空数据按钮文案
    onClickEmpty, // 空数据按钮点击回调
    onLoadMore,

    matchingFinished,
    historyFinished,
    onClickTitle,
    title = $t('我的赛事'),
  } = props;

  // 内部状态
  const [typeIsOpen, setTypeIsOpen] = useState(false);
  const [timeIsOpen, setTimeIsOpen] = useState(false);
  const [activeTabIndex, setActiveTabIndex] = useState(0); // 当前激活的标签索引，0: 进行中，1: 历史比赛

  // 切换下拉状态的回调函数
  const typeToggle = useCallback(() => {
    setTypeIsOpen(!typeIsOpen);
  }, [typeIsOpen]);

  const timeToggle = useCallback(() => {
    setTimeIsOpen(!timeIsOpen);
  }, [timeIsOpen]);

  // 处理侧边栏标签点击
  const handleTabSideClick = useCallback((item, index) => {
    setActiveTabIndex(index);
    // 调用外部传入的回调函数
    onClickTabSide?.(item, index);
  }, [onClickTabSide]);

  // 处理时间筛选tab点击
  const handleTimeFilterClick = useCallback((timeFilterItem, index) => {
    // 调用外部传入的回调函数
    onClickTimeFilterTab?.(timeFilterItem, index);
  }, [onClickTimeFilterTab]);


  const matchingContainerRef = useRef(null);
  const historyContainerRef = useRef(null);

  useLoadMore(
    async () => {
      onLoadMore();
    },
    {
      containerRef: matchingContainerRef,
      threshold: 100,
      debounceDelay: 0,
      isEnabled: true,
      finished: matchingFinished,
    },
  );

  useLoadMore(
    async () => {
      onLoadMore();
    },
    {
      containerRef: historyContainerRef,
      threshold: 100,
      debounceDelay: 0,
      isEnabled: true,
      finished: historyFinished,
    },
  );

  return (
    <div
      className={styles['pmg-my-match']}
    >
      <div className={styles['pmg-my-match-head']}>
        <div className={styles['pmg-my-info']}>
          <div className={styles['pmg-my-info-avatar']}>
            <CdnImage
              className={styles['pmg-my-avatar']}
              src={myInfo.avatar}
            />
          </div>
          <div className={styles['pmg-my-info-name']}>
            <text className={styles['pmg-my-name']}>
              {myInfo.name}
            </text>
            <div className={styles['pmg-my-rank']}>
              {myInfo.rank?.img && (
              <CdnImage
                className={styles['pmg-my-rank-img']}
                src={myInfo.rank.img}
              />
              )}
              <text className={styles['pmg-my-rank-name']}>{myInfo.rank?.name}</text>
            </div>
          </div>
        </div>
        <div className={styles['pmg-my-match-title']}>
          <text
            className={styles['pmg-title']}
            onClick={onClickTitle}
          >
            {title}
          </text>
          <div
            className={styles['pmg-btn-back']}
            onClick={onClickBack}
          >
          </div>
        </div>
      </div>
      <div className={styles['pmg-my-match-content']}>
        <div className={styles['pmg-my-match-box']}>
          <div className={styles['pmg-filter-list']} >
            <div className={styles['pmg-drop-down-box']}>
              <PMGDropDown
                dropDownWidth="2.12rem"
                dropDownHeight=".4rem"
                sidebar={typeList}
                selectedValue={typeValue}
                onToggleDropdown={typeToggle}
                onHandleSelect={onSelectType}
              />
            </div>
            {false && (
            <div className={styles['pmg-drop-down-box']}>
              <PMGDropDown
                dropDownWidth="2.28rem"
                dropDownHeight=".4rem"
                sidebar={orderList}
                selectedValue={orderValue}
                onToggleDropdown={timeToggle}
                onHandleSelect={onSelectOrder}
              />
            </div>
            )}
            {/* 时间tab：近一周 */}
            <div className={styles['pmg-filter-time-list']}>
              {
                timeFilterList.map((timeFilterItem, timeFilterIndex) => (
                  <div
                    key={timeFilterIndex}
                    className={`${styles['pmg-filter-time']} ${selectedTimeFilterIndex === timeFilterIndex ? styles['pmg-filter-time-active'] : ''}`}
                    onClick={() => handleTimeFilterClick(timeFilterItem, timeFilterIndex)}
                  >
                    {timeFilterItem}
                  </div>
                ))
              }
            </div>

            <PMGDropDown
              dropDownWidth="1.88rem"
              dropDownHeight=".4rem"
              selectedValue={startTime}
              onToggleDropdown={onClickStartTime}
              readonly={true}
            />
            <div className={styles['pmg-filter-line']}>-</div>
            <PMGDropDown
              dropDownWidth="1.88rem"
              dropDownHeight=".4rem"
              selectedValue={endTime}
              onToggleDropdown={onClickEndTime}
              readonly={true}
            />
          </div>
          {
            activeTabIndex === 0 && matchingList?.length > 0 && (
            <div
              className={styles['pmg-matching-list']}
              ref={matchingContainerRef}
              style={overflowStyle}
            >
              {
                matchingList.map((matching, matchingIndex) => (
                  <MatchingItem
                    key={matchingIndex}
                    matchingItem={matching}
                    onClick={() => onClickMatching(matching, matchingIndex)}
                  />
                ))
              }
            </div>
            )
          }
          {
            activeTabIndex === 1 && historyList?.length > 0 && (
            <div
              className={styles['pmg-history-list']}
              ref={historyContainerRef}
              style={overflowStyle}
            >
              {
                historyList.map((history, historyIndex) => (
                  <HistoryItem
                    key={historyIndex}
                    historyItem={history}
                    onClick={() => onClickHistory(history, historyIndex)}
                  />
                ))
              }
            </div>
            )
          }
          {
            ((activeTabIndex === 0 && !matchingList?.length)
              || (activeTabIndex === 1 && !historyList?.length)) && (
              <div className={styles['pmg-empty-box']}>
                <PMGEmpty
                  isTextBg={false}
                  emptyImg={emptyImg}
                  emptyText={emptyText}
                  onClickSignUp={onClickEmpty}
                  btnText={emptyBtnText}
                />
              </div>
            )
          }
        </div>
        <div className={styles['pmg-my-match-tab']}>
          <SideTab
            tabSideBarList={tabSideBarList}
            onClickTabSide={handleTabSideClick}
          />
        </div>
      </div>
    </div>
  );
};

export default PMGMyMatch;