import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:tone_snap/components/keep_alive_wrapper.dart';
import 'package:tone_snap/generated/assets.dart';
import 'package:tone_snap/modules/sideb/initial/initial_controller.dart';

class InitialView extends StatelessWidget {
  InitialView({super.key});

  final controller = Get.find<InitialController>();

  @override
  Widget build(BuildContext context) {
    double bottomPadding = MediaQuery.of(context).padding.bottom;
    return Stack(
      children: [
        Image.asset(
          Assets.sideBHomeBg,
          width: 1.sw,
          fit: BoxFit.fitWidth,
        ),
        Scaffold(
          backgroundColor: Colors.transparent,
          body: PageView(
            physics: const NeverScrollableScrollPhysics(),
            controller: controller.pageController,
            children: controller.pages.map((e) => KeepAliveWrapper(child: e.widget)).toList(),
          ),
          bottomNavigationBar: _buildBottomAppBar(bottomPadding),
        ),
        // _buildPlayerBar(bottomPadding),
      ],
    );
  }

  Widget _buildBottomAppBar(double bottomPadding) {
    return Container(
      height: 72.h + bottomPadding,
      padding: EdgeInsets.only(bottom: bottomPadding),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(topLeft: Radius.circular(24.r), topRight: Radius.circular(24.r)),
        image: const DecorationImage(
          image: AssetImage(Assets.sideBBnbBg),
          fit: BoxFit.fill,
        ),
      ),
      child: Row(
        children: controller.pages.asMap().entries.map((e) {
          return Expanded(
            child: GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () => controller.onBottomAppBarItemChanged(e.key),
              child: SizedBox(
                height: double.infinity,
                child: FittedBox(
                  fit: BoxFit.none,
                  child: Obx(() {
                    return Visibility(
                      visible: controller.currentIndex.value == e.key,
                      replacement: Image.asset(
                        e.value.icons[0],
                        width: 28.w,
                        height: 28.w,
                      ),
                      child: Image.asset(
                        e.value.icons[1],
                        width: 36.w,
                        height: 36.w,
                        gaplessPlayback: true,
                      ),
                    );
                  }),
                ),
              ),
            ),
          );
        }).toList(),
      ),
    );
  }

  Widget _buildPlayerBar(double bottomPadding) {
    return Positioned(
      bottom: 65.5.h + bottomPadding,
      left: 16.w,
      right: 16.w,
      child: Container(
        width: 1.sw,
        height: 75.5.h,
        decoration: BoxDecoration(
          color: const Color(0xFF80F988),
          borderRadius: BorderRadius.circular(36).r,
          boxShadow: const [
            BoxShadow(
              color: Color(0x40040604),
              offset: Offset(0, 4),
              blurRadius: 4,
              spreadRadius: 0,
            ),
          ],
        ),
      ),
    );
  }
}