import 'package:clean/module/more/more_view.dart';
import 'package:clean/utils/expand.dart';
import 'package:convex_bottom_bar/convex_bottom_bar.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../../base/base_page.dart';
import '../../resource/assets.gen.dart';
import '../../router/app_pages.dart';
import '../home/home_view.dart';
import 'main_controller.dart';
import 'package:flutter/Material.dart';
import 'package:get/get.dart';

class MainTabPage extends BasePage<MainController> {
  MainTabPage({super.key});

  final pages = [
    const HomePage(),
    const MorePage(),
  ];

  static void start() {
    Get.offNamed(RoutePath.mainTab, arguments: {});
  }

  @override
  Widget buildBody(BuildContext context) {
    return PopScope(
      canPop: false,
      child: Scaffold(
        bottomNavigationBar: buildBottomAppBar(),
        drawerEdgeDragWidth: 0,
        body: Obx(() {
          return pages[controller.currentIndex];
        }),
      ),
    );
  }

  Widget buildBottomAppBar() {
    return Container(
      // height: 100.h,
      // decoration: BoxDecoration(
      //   color: "#0F0F16".color,
      //   boxShadow: [
      //     BoxShadow(
      //       color: Colors.black.withOpacity(0.1),
      //       spreadRadius: 1,
      //       blurRadius: 10,
      //       offset: const Offset(0, 0),
      //     ),
      //   ],
      //   borderRadius: BorderRadius.only(
      //     topLeft: Radius.circular(20.r),
      //     topRight: Radius.circular(20.r),
      //   ),
      // ),
      child: ConvexAppBar(
        height: 80.h,
        items: [
          TabItem(icon: Assets.images.iconTabHomeUnselect.image(width: 24.w, height: 24.w), activeIcon: Assets.images.iconTabHomeSelected.image(width: 66.w, height: 66.w)),
          TabItem(icon: Assets.images.iconTabMoreUnselect.image(width: 24.w, height: 24.w), activeIcon: Assets.images.iconTabMoreSelected.image(width: 66.w, height: 66.w)),
        ],
        onTap: (int i) {
          if (controller.currentIndex != i) {
            controller.changeIndex(i);
          }
        },
      )


      // BottomAppBar(
      //   color: Colors.transparent,
      //   height: 100.h,
      //   padding: EdgeInsets.zero,
      //   shape: CircularNotchedRectangle(),
      //   child: Flex(
      //     direction: Axis.horizontal,
      //     mainAxisAlignment: MainAxisAlignment.spaceAround,
      //     children: [
      //       Expanded(flex: 1, child: bottomAppBarItem(0)),
      //       const Expanded(flex: 1, child: SizedBox()),
      //       Expanded(flex: 1, child: bottomAppBarItem(1))
      //     ],
      //   ),
      // ),
    );
  }

  Widget bottomAppBarItem(int index) {
    return Obx(() {
      TabBean tabBean = controller.tabBeans[index];
      String imagePath = controller.currentIndex == index
          ? tabBean.selectedIcon
          : tabBean.normalIcon;

      return GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () {
          if (controller.currentIndex != index) {
            controller.changeIndex(index);
          }
        },
        child: Container(
          child: SizedBox(
            height: 100.h,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                controller.currentIndex == index
                    ? Image.asset(
                  imagePath,
                  width: 66.w,
                  height: 66.w,
                )
                    : Image.asset(
                  imagePath,
                  width: 24.w,
                  height: 24.w,
                ),
              ],
            ),
          ),
        ),

      );
    });
  }
}