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/components/my_marquee_text.dart';
import 'package:tone_snap/generated/assets.dart';
import 'package:tone_snap/modules/voice/initial/initial_controller.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Obx(() {
          return IndexedStack(
            index: controller.currentIndex.value,
            children: [
              Stack(
                children: [
                  Image.asset(
                    Assets.imagesHomeBg,
                    width: 1.sw,
                    height: 1.sh,
                    fit: BoxFit.fill,
                  ),
                  Positioned(
                    bottom: 0,
                    child: Image.asset(
                      Assets.imagesHomeBnbBg,
                      width: 1.sw,
                      height: 222.h,
                      fit: BoxFit.fill,
                    ),
                  ),
                ],
              ),
              Container(),
              Image.asset(
                Assets.imagesUploadMethodBg,
                width: 1.sw,
                height: 1.sh,
                fit: BoxFit.fill,
              ),
              Image.asset(
                Assets.imagesSettingsBg,
                width: 1.sw,
                height: 1.sh,
                fit: BoxFit.fill,
              ),
            ],
          );
        }),
        Scaffold(
          resizeToAvoidBottomInset: false,
          backgroundColor: Colors.transparent,
          body: Column(
            children: [
              Expanded(
                child: PageView(
                  physics: const NeverScrollableScrollPhysics(),
                  controller: controller.pageController,
                  children: controller.pages.map((e) => KeepAliveWrapper(child: e.widget)).toList(),
                ),
              ),
              _buildPlayBar(),
            ],
          ),
          bottomNavigationBar: _buildBottomAppBar(),
        ),
      ],
    );
  }

  Widget _buildPlayBar() {
    return Obx(() {
      return Visibility(
        visible: controller.currentPlayVoiceModel.value != null && !controller.playerController.isCompleted.value,
        child: GestureDetector(
          onTap: controller.onTapPlayBar,
          child: Container(
            height: 72.h,
            margin: EdgeInsets.fromLTRB(14.w, 0, 14.w, 7.h),
            padding: const EdgeInsets.only(left: 34, right: 30).w,
            decoration: BoxDecoration(
              color: Colors.black,
              borderRadius: BorderRadius.circular(39),
            ),
            child: Row(
              children: [
                Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Obx(() {
                        return MyMarqueeText(
                          text: '${controller.currentPlayVoiceModel.value?.name}',
                          textStyle: TextStyle(
                            color: Colors.white,
                            fontSize: 16.sp,
                            fontWeight: FontWeight.bold,
                          ),
                        );
                      }),
                      SizedBox(height: 4.h),
                      Obx(() {
                        return Text(
                          '${controller.playerController.getPositionDuration()}/${controller.playerController.getDuration()}',
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                            color: const Color(0x73FFFFFF),
                            fontSize: 12.sp,
                          ),
                        );
                      }),
                    ],
                  ),
                ),
                SizedBox(width: 13.w),
                Obx(() {
                  return GestureDetector(
                    onTap: controller.onTapFavourite,
                    child: Image.asset(
                      controller.isFavourite.value ? Assets.imagesFavorite : Assets.imagesNotFavorite,
                      width: 28.w,
                      height: 28.w,
                    ),
                  );
                }),
                SizedBox(width: 13.w),
                GestureDetector(
                  onTap: controller.togglePlayback,
                  child: Image.asset(
                    controller.playerController.isPlaying.value ? Assets.imagesPlaying1 : Assets.imagesNotPlayed1,
                    width: 38.w,
                    height: 38.w,
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    });
  }

  BottomAppBar _buildBottomAppBar() {
    return BottomAppBar(
      height: kBottomNavigationBarHeight,
      padding: EdgeInsets.symmetric(horizontal: (1.sw - (28.w * 4)) / 8),
      color: Colors.transparent,
      child: SizedBox(
        height: double.infinity,
        child: Row(
          children: controller.pages.asMap().entries.map((e) {
            return Expanded(
              child: GestureDetector(
                behavior: HitTestBehavior.opaque,
                child: Obx(() {
                  return Image.asset(
                    e.value.icons[controller.currentIndex.value == e.key ? 1 : 0],
                    width: 28.w,
                    height: 28.w,
                    color: controller.currentIndex.value == e.key ? const Color(0xFF8602ED) : null,
                  );
                }),
                onTap: () => controller.onBottomAppBarItemChanged(e.key),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}