import 'package:chat/configs/app_colors.dart';
import 'package:chat/services/tabbar_service.dart';
import 'package:chat/views/contact/index/index_page.dart';
import 'package:chat/views/home/index_page.dart';
import 'package:chat/views/moments/index/index_page.dart';
import 'package:chat/views/user/index/index_page.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:proste_indexed_stack/proste_indexed_stack.dart';

class AppPage extends StatelessWidget {
  AppPage({Key? key}) : super(key: key);

  final List<IndexedStackChild> _tabBarPageList = [
    IndexedStackChild(child: const HomePage()),
    IndexedStackChild(child: const ContactPage()),
    IndexedStackChild(child: const MomentsPage()),
    IndexedStackChild(child: const UserPage()),
  ];

  final List<Map> _tabBarList = [
    {
      'icon': Icons.message_outlined,
      'active_icon': Icons.message,
      'label': '消息',
    },
    {
      'icon': Icons.contact_page_outlined,
      'active_icon': Icons.contact_page,
      'label': '通讯录',
    },
    {
      'icon': Icons.explore_outlined,
      'active_icon': Icons.explore,
      'label': '发现',
    },
    {
      'icon': Icons.person_outline,
      'active_icon': Icons.person,
      'label': '我的',
    },
  ];

  Widget _bottomNavigationBar() {
    return GetX<TabbarService>(
      builder: (_) {
        return BottomNavigationBar(
          currentIndex: _.index,
          onTap: (index) {
            _.index = index;
          },
          items: _tabBarList.map((item) {
            return BottomNavigationBarItem(
              icon: Icon(
                item['icon'],
                size: 24,
              ),
              activeIcon: Icon(
                item['active_icon'],
                size: 24,
                color: AppColors.primary,
              ),
              label: item['label'],
              tooltip: '',
            );
          }).toList(),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GetX<TabbarService>(
        builder: (_) {
          return ProsteIndexedStack(
            index: _.index,
            children: _tabBarPageList,
          );
        },
      ),
      bottomNavigationBar: _bottomNavigationBar(),
    );
  }
}
