import React, { useState, useEffect } from 'react';
import Taro from '@tarojs/taro';
import { View, Text } from '@tarojs/components';
import { 
  FaHome, 
  FaDoorOpen, 
  FaHistory, 
  FaUser, 
  FaHouseUser, 
  FaDoorClosed, 
  FaCalendarAlt, 
  FaUserCircle 
} from 'react-icons/fa';
import './index.scss';

interface TabItem {
  pagePath: string;
  text: string;
  icon: React.ReactNode;
  selectedIcon: React.ReactNode;
}

const CustomTabBar: React.FC = () => {
  const [currentPath, setCurrentPath] = useState<string>('');
  const [tabs] = useState<TabItem[]>([
    {
      pagePath: '/pages/index/index',
      text: '游戏广场',
      icon: <FaHome size={20} color="#999" />,
      selectedIcon: <FaHouseUser size={20} color="#4F7FFE" />
    },
    {
      pagePath: '/pages/room/join/index',
      text: '我的房间',
      icon: <FaDoorOpen size={20} color="#999" />,
      selectedIcon: <FaDoorClosed size={20} color="#4F7FFE" />
    },
    {
      pagePath: '/pages/game-history/index',
      text: '游戏历史',
      icon: <FaHistory size={20} color="#999" />,
      selectedIcon: <FaCalendarAlt size={20} color="#4F7FFE" />
    },
    {
      pagePath: '/pages/profile/index',
      text: '个人中心',
      icon: <FaUser size={20} color="#999" />,
      selectedIcon: <FaUserCircle size={20} color="#4F7FFE" />
    }
  ]);

  useEffect(() => {
    const page = Taro.getCurrentInstance().router;
    if (page) {
      const path = `/${page.path}`;
      setCurrentPath(path);
    }
  }, []);

  const handleTabClick = (pagePath: string) => {
    Taro.switchTab({ url: pagePath });
    setCurrentPath(pagePath);
  };

  return (
    <View className='custom-tab-bar'>
      {tabs.map(tab => (
        <View 
          key={tab.pagePath} 
          className={`custom-tab-bar__item ${currentPath === tab.pagePath ? 'custom-tab-bar__item--active' : ''}`}
          onClick={() => handleTabClick(tab.pagePath)}
        >
          <View className='custom-tab-bar__icon'>
            {currentPath === tab.pagePath ? tab.selectedIcon : tab.icon}
          </View>
          <Text className='custom-tab-bar__text'>{tab.text}</Text>
        </View>
      ))}
    </View>
  );
};

export default CustomTabBar; 