import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:skywood/pages/home/home_page.dart';
import 'package:skywood/pages/like/like_page.dart';
import 'package:skywood/pages/mine/mine_page.dart';
import 'package:skywood/pages/search/page/search_page.dart';
import 'package:skywood/utils/tools/help_img.dart';

class MainRoot extends StatefulWidget {
  const MainRoot({super.key});

  @override
  State<StatefulWidget> createState() {
    return _MainRootState();
  }
}

class _MainRootState extends State<MainRoot> {
  final List<Widget> _pages = const [
    HomePage(),
    SearchPage(),
    LikePage(),
    MinePage(),
  ];

  final _pageController = PageController();
  final List<_TabBarItem> _items = const [
    _TabBarItem(
      selectedIcon: ConstImg.tabHomeSelected,
      unselectedIcon: ConstImg.tabHomeUnselect,
      key: Key('main-tab-home'),
    ),
    _TabBarItem(
      selectedIcon: ConstImg.tabSearchSelected,
      unselectedIcon: ConstImg.tabSearchUnselect,
      key: Key('main-tab-search'),
    ),
    _TabBarItem(
      selectedIcon: ConstImg.tabLikeSelected,
      unselectedIcon: ConstImg.tabLikeUnselect,
      key: Key('main-tab-like'),
    ),
    _TabBarItem(
      selectedIcon: ConstImg.tabMineSelected,
      unselectedIcon: ConstImg.tabMineUnselect,
      key: Key('main-tab-mine'),
    ),
  ];

  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      // body: IndexedStack(index: _currentIndex, children: _pages),
      body: PageView(
        physics: const NeverScrollableScrollPhysics(),
        controller: _pageController,
        children: _pages,
      ),
      bottomNavigationBar: SafeArea(
        top: false,
        minimum: EdgeInsets.only(bottom: 10.h),
        child: Stack(
          children: [
            SizedBox(height: 49.h, width: 345.w),
            Positioned(top: 11.h, child: _buildTabBar()),
            Positioned(top: 0, left: 15.w, child: _buildImgs()),
          ],
        ),
      ),
    );
  }

  Widget _buildImgs() {
    return SizedBox(
      height: 38.h,
      width: 345.w,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: List.generate(_items.length, (index) {
          final item = _items[index];
          final isSelected = index == _currentIndex;

          return GestureDetector(
            key: item.key,
            behavior: HitTestBehavior.opaque,
            onTap: () => _changeTab(index),
            child: Center(
              child: Image.asset(
                isSelected ? item.selectedIcon : item.unselectedIcon,
                width: 40.w,
                height: 40.w,
              ),
            ),
          );
        }),
      ),
    );
  }

  Widget _buildTabBar() {
    return Container(
      key: const Key('main-tab-bar'),
      width: 345.w,
      height: 38.h,
      margin: EdgeInsets.symmetric(horizontal: 15.w),
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage(ConstImg.bottomBar),
          fit: BoxFit.fill,
        ),
      ),
    );
  }

  void _changeTab(int index) {
    if (_currentIndex == index) {
      return;
    }
    _pageController.jumpToPage(index);
    setState(() {
      _currentIndex = index;
    });
  }
}

class _TabBarItem {
  const _TabBarItem({
    required this.selectedIcon,
    required this.unselectedIcon,
    required this.key,
  });

  final String selectedIcon;
  final String unselectedIcon;
  final Key key;
}