/**
 * 简单导航示例 - 使用 useState 管理页面跳转
 */
import React, { useState } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { LiveListPage } from 'react-native-tuikit-live';

type PageType = 'home' | 'liveList' | 'liveEnd' | 'liveAudience';

function MyApp() {

  const [currentPage, setCurrentPage] = useState<PageType>('home');

  // 跳转到直播列表页面
  const handleJumpLiveList = async () => {
    setCurrentPage('liveList');
  };

  // 从直播列表页返回
  const handleBackFromLiveList = () => {
    setCurrentPage('home');
  };

  return (
    <SafeAreaProvider>
      {currentPage === 'home' && (
        <View style={styles.container}>
          <Button title="进入直播列表" onPress={handleJumpLiveList} />
        </View>
      )}

      {currentPage === 'liveList' && (
        <LiveListPage
          onBack={handleBackFromLiveList}
        />
      )}

      {currentPage === 'liveEnd' && (
        <View style={styles.container}>
          <Button title="返回首页" onPress={() => setCurrentPage('home')} />
        </View>
      )}
    </SafeAreaProvider>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});


export default MyApp;

const CARD_WIDTH = (SCREEN_WIDTH - CONTAINER_PADDING * 2 - CARD_GAP) / 2; // 一行两个

// 将直播列表分组，每行两个元素
const groupedLiveList = useMemo(() => {
  const groups: LiveInfoParam[][] = [];
  for (let i = 0; i < filteredLiveList.length; i += 2) {
    groups.push(filteredLiveList.slice(i, i + 2));
  }
  return groups;
}, [filteredLiveList]);

const CARD_WIDTH = (SCREEN_WIDTH - CONTAINER_PADDING * 2); // 一行一个

const groupedLiveList = useMemo(() => {
  const groups: LiveInfoParam[][] = [];
  for (let i = 0; i < filteredLiveList.length; i += 1) { // 把 2 改成 1
    groups.push(filteredLiveList.slice(i, i + 1)); // 把 2 改成 1
  }
  return groups;
}, [filteredLiveList]);