import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:wallpaperx/common/components/keep_alive_wrapper.dart';
import 'package:wallpaperx/page/home/home_controller.dart';

import 'drawer_view/home_drawer_view.dart';

class HomeView extends GetView<HomeController> {
  const HomeView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      key: controller.scaffoldKey,
      drawer: const HomeDrawerView(),
      body: Stack(
        alignment: AlignmentDirectional.bottomCenter,
        children: [
          _buildBody(),
          _bottomNavigationBar(),
        ],
      ),
    );
  }

  Widget _buildBody() {
    return PageView(
      physics: const NeverScrollableScrollPhysics(),
      controller: controller.pageController,
      onPageChanged: (index) => controller.onPageChanged(index),
      children: controller.pages
          .map((e) => KeepAliveWrapper(child: e.widget))
          .toList(),
    );
  }

  Widget _bottomNavigationBar() {
    return Obx(
      () => Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [
              Colors.transparent,
              Colors.black,
            ],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
          ),
        ),
        child: BottomNavigationBar(
          backgroundColor: Colors.transparent,
          type: BottomNavigationBarType.fixed,
          currentIndex: controller.currentIndex.value,
          onTap: (index) => controller.onTapNavigationBar(index),
          items: controller.pages.map((e) {
            return BottomNavigationBarItem(
              icon: Image.asset(
                e.icons,
                width: 30.w,
                height: 30.w,
                color: const Color(0xff6D6D6D),
                gaplessPlayback: true,
              ),
              activeIcon: Image.asset(
                e.icons,
                width: 30.w,
                height: 30.w,
                color: Colors.white,
                gaplessPlayback: true,
              ),
              label: "",
            );
          }).toList(),
        ),
      ),
    );
  }
}
