import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:tone_snap/components/my_marquee_text.dart';
import 'package:tone_snap/components/network_image_widget.dart';
import 'package:tone_snap/generated/assets.dart';
import 'package:tone_snap/modules/sideb/controllers/music_player_controller.dart';
import 'package:tone_snap/res/themes/app_sizes.dart';
import 'package:tone_snap/utils/obj_util.dart';

import 'music_bar_controller.dart';

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

  final controller = Get.put(MusicBarController(), permanent: true);
  final musicPlayerController = MusicPlayerController.to;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Stack(
        fit: StackFit.expand,
        children: [
          Obx(() {
            return AnimatedPositioned(
              bottom: controller.bottom.value,
              left: 16.w,
              right: 16.w,
              duration: const Duration(milliseconds: 200),
              child: GestureDetector(
                onTap: controller.openPlayPage,
                child: Container(
                  width: 1.sw - 32.w,
                  height: musicBarHeight,
                  padding: EdgeInsets.symmetric(horizontal: 22.w),
                  decoration: BoxDecoration(
                    color: const Color(0xFF80F988),
                    borderRadius: BorderRadius.circular(36).r,
                  ),
                  child: Row(
                    children: [
                      Stack(
                        alignment: Alignment.center,
                        children: [
                          SizedBox(
                            width: 52.w,
                            height: 52.w,
                            child: Obx(() {
                              int comparison = musicPlayerController.positionDuration.value.compareTo(musicPlayerController.totalDuration.value);
                              double value = comparison < 0 ? (musicPlayerController.positionDuration.value.inSeconds / musicPlayerController.totalDuration.value.inSeconds).toDouble() : 0;
                              return CircularProgressIndicator(
                                value: value,
                                backgroundColor: Colors.transparent,
                                strokeWidth: 4.w,
                                valueColor: const AlwaysStoppedAnimation<Color>(Colors.white),
                              );
                            }),
                          ),
                          Obx(() {
                            return ClipOval(
                              child: FittedBox(
                                fit: BoxFit.none,
                                child: NetworkImageWidget(
                                  url: musicPlayerController.getMusicModel()?.value.coverUrl,
                                  width: 48.w,
                                  height: 48.w,
                                ),
                              ),
                            );
                          }),
                        ],
                      ),
                      SizedBox(width: 12.w),
                      Expanded(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Obx(() {
                              return MyMarqueeText(
                                text: ObjUtil.getStr(musicPlayerController.getMusicModel()?.value.title),
                                textStyle: TextStyle(
                                  color: Colors.black,
                                  fontSize: 16.sp,
                                  fontWeight: FontWeight.w600,
                                ),
                              );
                            }),
                            SizedBox(height: 4.h),
                            Obx(() {
                              return MyMarqueeText(
                                text: ObjUtil.getStr(musicPlayerController.getMusicModel()?.value.subtitle),
                                textStyle: TextStyle(
                                  color: Colors.black,
                                  fontSize: 12.sp,
                                ),
                              );
                            }),
                          ],
                        ),
                      ),
                      const SizedBox(width: 13),
                      Obx(() {
                        return GestureDetector(
                          onTap: musicPlayerController.playPause,
                          child: Image.asset(
                            musicPlayerController.isPlaying.value ? Assets.sideBPausePlay : Assets.sideBStartPlay,
                            width: 24.w,
                            height: 24.w,
                          ),
                        );
                      }),
                      const SizedBox(width: 26),
                      GestureDetector(
                        onTap: musicPlayerController.nextTrack,
                        child: Image.asset(
                          Assets.sideBMusicBarNext,
                          width: 24.w,
                          height: 24.w,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            );
          }),
        ],
      ),
    );
  }
}
