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/components/round_rect_slider_thumb_shape.dart';
import 'package:tone_snap/components/round_rect_slider_track_shape.dart';
import 'package:tone_snap/generated/assets.dart';
import 'package:tone_snap/modules/sidea/change_voice/change_voice_controller.dart';
import 'package:tone_snap/utils/num_util.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Image.asset(
          Assets.sideAChangeVoiceBg,
          width: 1.sw,
          height: 1.sh,
          fit: BoxFit.fill,
        ),
        Scaffold(
          backgroundColor: Colors.transparent,
          appBar: const BaseAppBar('Change voice', backgroundColor: Colors.transparent),
          body: Column(
            children: [
              Expanded(
                child: _buildTimber(),
              ),
              SizedBox(height: 20.h),
              _buildSlider(context, 0),
              SizedBox(height: 20.h),
              _buildSlider(context, 1),
              SizedBox(height: 20.h),
              // _buildPlayer(),
              _buildSave(),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildTimber() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(height: 12.h),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 24).w,
          child: Text(
            'Timber',
            style: TextStyle(
              color: Colors.white,
              fontSize: 20.sp,
              fontWeight: FontWeight.w700,
            ),
          ),
        ),
        SizedBox(height: 16.h),
        Obx(() {
          return Expanded(
            child: GridView.builder(
              itemCount: controller.timberList.length,
              padding: EdgeInsets.symmetric(horizontal: 24.w),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 4,
                mainAxisSpacing: 10.h,
                crossAxisSpacing: 0.w,
                childAspectRatio: 102/130,
              ),
              itemBuilder: (context, index) {
                return _buildItem(controller.timberList[index], index);
              },
            ),
          );
        }),
      ],
    );
  }

  Widget _buildItem(Timber item, int index) {
    return GestureDetector(
      onTap: () => controller.onTapItem(item, index),
      child: Column(
        children: [
          Stack(
            alignment: Alignment.center,
            clipBehavior: Clip.none,
            children: [
              Visibility(
                visible: item.check,
                maintainState: true,
                maintainAnimation: true,
                maintainSize: true,
                child: Image.asset(
                  Assets.sideAChangeVoiceItemFrame,
                  width: 78.w,
                  height: 78.w,
                  fit: BoxFit.fill,
                ),
              ),
              ClipRRect(
                borderRadius: BorderRadius.circular(64.w/2),
                child: Image.asset(
                  item.cover,
                  width: 64.w,
                  height: 64.w,
                  fit: BoxFit.cover,
                ),
              ),
              Visibility(
                visible: item.check,
                child: Positioned(
                  right: 0.w,
                  bottom: 0.h,
                  child: Image.asset(
                    Assets.sideAChangeVoiceItemSelected,
                    width: 23.w,
                    height: 23.w,
                    fit: BoxFit.fill,
                  ),
                ),
              ),
            ],
          ),
          SizedBox(height: 4.h),
          Expanded(
            child: MyMarqueeText(
              text: item.name.toString(),
              textStyle: TextStyle(
                color: Colors.white,
                fontSize: 16.sp,
                fontWeight: FontWeight.w500,
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildSlider(BuildContext context, int type) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 24).w,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            type == 0 ? 'Tone' : 'Sound speed',
            style: TextStyle(
              color: Colors.white,
              fontSize: 20.sp,
              fontWeight: FontWeight.w700,
            ),
          ),
          SizedBox(height: 16.h),
          Row(
            children: [
              Expanded(
                child: Obx(() {
                  return SliderTheme(
                    data: SliderTheme.of(context).copyWith(
                      activeTrackColor: const Color(0x33000000),
                      inactiveTrackColor: const Color(0x33000000),
                      trackShape: RoundRectSliderTrackShape(
                        trackHeight: 20.h,
                        trackRadius: 12.r,
                      ),
                      thumbShape: RoundRectSliderThumbShape(
                        thumbWidth: 32.w,
                        thumbHeight: 44.h,
                        thumbRadius: 12.r,
                        thumbColor: controller.currentIndex.value == controller.timberList.length - 1 ? Colors.black : const Color(0x33000000),
                      ),
                    ),
                    child: Slider(
                      min: 0.5,
                      max: 2,
                      value: type == 0 ? controller.toneValue.value : controller.soundSpeedValue.value,
                      onChanged: controller.currentIndex.value == controller.timberList.length - 1 ? (value) => controller.onChanged(value, type) : null,
                    ),
                  );
                }),
              ),
              SizedBox(width: 20.w),
              Obx(() {
                return SizedBox(
                  width: 40.w,
                  child: Text(
                    type == 0 ? NumUtil.formatNum(controller.toneValue.value) : NumUtil.formatNum(controller.soundSpeedValue.value),
                    style: TextStyle(
                      color: const Color(0x73000000),
                      fontSize: 16.sp,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                );
              }),
            ],
          ),
        ],
      ),
    );
  }

  // Widget _buildPlayer() {
  //   return Row(
  //     children: [
  //       SizedBox(width: 24.w),
  //       GestureDetector(
  //         onTap: controller.togglePlayback,
  //         child: ClipOval(
  //           child: Container(
  //             width: 54.w,
  //             height: 54.w,
  //             color: Colors.black,
  //             child: Center(
  //               child: Obx(() {
  //                 return Image.asset(
  //                   controller.playerController.isPlaying.value ? Assets.sideAPlaying1 : Assets.sideANotPlayed1,
  //                   width: 29.w,
  //                   height: 29.w,
  //                 );
  //               }),
  //             ),
  //           ),
  //         ),
  //       ),
  //       SizedBox(width: 16.w),
  //       Expanded(
  //         child: Column(
  //           children: [
  //             SizedBox(height: 17.h),
  //             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: 8.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,
  //                       ),
  //                     );
  //                   }),
  //                 ),
  //               ],
  //             ),
  //           ],
  //         ),
  //       ),
  //       SizedBox(width: 34.w),
  //     ],
  //   );
  // }

  Widget _buildSave() {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 24).h,
      child: ClipRRect(
        borderRadius: BorderRadius.circular(26.5),
        child: Material(
          color: Colors.black,
          child: InkWell(
            onTap: controller.save,
            child: Container(
              width: 229.w,
              height: 53.h,
              alignment: Alignment.center,
              child: Text(
                'Save',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24.sp,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}