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/base_appbar.dart';
import 'package:tone_snap/generated/assets.dart';
import 'package:tone_snap/modules/sidea/initial/initial_controller.dart';
import 'package:tone_snap/modules/sidea/play_sound/play_sound_controller.dart';
import 'package:tone_snap/utils/obj_util.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        Image.asset(
          Assets.sideAPlaySoundBg,
          width: 1.sw,
          height: 1.sh,
          fit: BoxFit.fill,
        ),
        Scaffold(
          backgroundColor: Colors.transparent,
          appBar: BaseAppBar('', backWidget: _buildBackWidget(), backgroundColor: Colors.transparent),
          body: SizedBox(
            width: 1.sw,
            child: Column(
              children: [
                _buildCover(),
                SizedBox(height: 60.h),
                _buildVoiceName(),
                SizedBox(height: 32.h),
                _buildProgressBar(),
                SizedBox(height: 50.h),
                _buildControlMenu(),
                SizedBox(height: 50.h),
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildBackWidget() {
    return ClipOval(
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: Get.back,
          child: Padding(
            padding: const EdgeInsets.all(10).w,
            child: Image.asset(
              Assets.sideAArrowDownBack,
              width: 24.w,
              height: 24.w,
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildCover() {
    return Expanded(
      child: Visibility(
        visible: ObjUtil.isNotEmpty(controller.voiceModel.cover),
        replacement: SizedBox(
          width: 296.w,
          height: 296.w,
          child: FittedBox(
            fit: BoxFit.none,
            child: Image.asset(
              Assets.sideAVoiceDefault,
              width: 200.w,
              height: 200.w,
              fit: BoxFit.contain,
            ),
          ),
        ),
        child: FittedBox(
          fit: BoxFit.none,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(31),
            child: Image.asset(
              '${controller.voiceModel.cover}',
              width: 296.w,
              height: 296.w,
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildVoiceName() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16).w,
      child: MyMarqueeText(
        text: controller.voiceModel.name,
        textStyle: TextStyle(
          color: Colors.black,
          fontSize: 24.sp,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }

  Widget _buildProgressBar() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16).w,
      child: Column(
        children: [
          ClipRRect(
            borderRadius: BorderRadius.circular(6.5),
            child: Obx(() {
              return LinearProgressIndicator(
                value: controller.playerController.positionValue.value,
                valueColor: const AlwaysStoppedAnimation<Color>(Colors.black),
                backgroundColor: const Color(0x40000000),
                borderRadius: BorderRadius.circular(6.5),
                minHeight: 12.h,
              );
            }),
          ),
          SizedBox(height: 6.h),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Flexible(
                child: Obx(() {
                  return Text(
                    controller.playerController.getPositionDuration(),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      color: const Color(0x73000000),
                      fontSize: 14.sp,
                      fontWeight: FontWeight.w500,
                    ),
                  );
                }),
              ),
              Flexible(
                child: Obx(() {
                  return Text(
                    controller.playerController.getDuration(),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      color: const Color(0x73000000),
                      fontSize: 14.sp,
                      fontWeight: FontWeight.w500,
                    ),
                  );
                }),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildControlMenu() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        GestureDetector(
          onTap: InitialController.to.onTapFavourite,
          child: ClipOval(
            child: Container(
              width: 52.w,
              height: 52.w,
              color: Colors.black,
              child: Obx(() {
                return Image.asset(
                  InitialController.to.isFavourite.value ? Assets.sideAFavorite : Assets.sideANotFavorite,
                  width: 28.w,
                  height: 28.w,
                );
              }),
            ),
          ),
        ),
        SizedBox(width: 30.w),
        GestureDetector(
          onTap: controller.togglePlayback,
          child: ClipOval(
            child: Container(
              width: 76.w,
              height: 76.w,
              color: Colors.black,
              child: Obx(() {
                return Image.asset(
                  controller.playerController.isPlaying.value ? Assets.sideAPlaying1 : Assets.sideANotPlayed1,
                  width: 38.w,
                  height: 38.w,
                );
              }),
            ),
          ),
        ),
        SizedBox(width: 30.w),
        GestureDetector(
          onTap: controller.goChangeVoice,
          child: ClipOval(
            child: Container(
              width: 52.w,
              height: 52.w,
              color: Colors.black,
              child: Image.asset(
                Assets.sideAChangeVoice,
                width: 28.w,
                height: 28.w,
              ),
            ),
          ),
        ),
      ],
    );
  }
}
