import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:tone_snap/components/full_width_track_shape.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/widgets/music_appbar.dart';
import 'package:tone_snap/res/themes/app_colors.dart';
import 'package:tone_snap/utils/obj_util.dart';

import 'play_music_controller.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Obx(() {
          return Visibility(
            visible: ObjUtil.isNotEmptyStr(controller.thumbnail.value),
            child: NetworkImageWidget(
              url: controller.thumbnail.value,
              width: 1.sw,
              height: 1.sh,
              placeholder: Container(),
              errorWidget: Container(),
            ),
          );
        }),
        _buildPageBg(),
        Scaffold(
          backgroundColor: Colors.transparent,
          body: Column(
            children: [
              _buildHeader(),
              Expanded(
                child: SingleChildScrollView(
                  padding: const EdgeInsets.symmetric(horizontal: 20).w,
                  child: Column(
                    children: [
                      SizedBox(height: 12.h),
                      _buildCover(),
                      SizedBox(height: 36.h),
                      _buildMusicName(),
                      SizedBox(height: 24.h),
                      _processBar(context),
                      SizedBox(height: 100.h),
                      _buildPlayController(),
                    ],
                  ),
                ),
              ),
            ],
          ),
        )
      ],
    );
  }

  /// 页面占位背景
  Widget _buildPageBg() {
    return BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 50.0, sigmaY: 50.0),
      child: Container(
        width: 1.sw,
        height: 1.sh,
        color: const Color(0x26000000),
      ),
    );
  }

  /// 头部
  Widget _buildHeader() {
    return MusicAppbar(
      isDownBack: true,
      isBackBorder: true,
      actionOnTap: (){},
      titleWidget: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          _buildMenuText('SONG', true),
          Container(
            width: 1.w,
            height: 14.h,
            color: const Color(0x73FFFFFF),
          ),
          _buildMenuText('LYRICS', false),
        ],
      ),
      action: Image.asset(
        Assets.sideBCrossCircle,
        width: 24.w,
        height: 24.w,
      ),
    );
  }

  /// 播放页/歌词页
  Widget _buildMenuText(String label, bool selected) {
    return InkWell(
      onTap: (){},
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 15.5.w, vertical: 8.h),
        child: Text(
          label,
          style: TextStyle(
            color: Color(selected ? 0xD9FFFFFF : 0x73FFFFFF),
            fontSize: 15.sp,
          ),
        ),
      ),
    );
  }

  /// 封面
  Widget _buildCover() {
    return Obx(() {
      return NetworkImageWidget(
        url: controller.thumbnail.value,
        width: 1.sw,
        height: 330.h,
        radius: 16.r,
      );
    });
  }

  /// 歌名/作者信息、收藏、下载
  Widget _buildMusicName() {
    return Row(
      children: [
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Obx(() {
                return MyMarqueeText(
                  text: ObjUtil.getStr(controller.title.value),
                  textStyle: TextStyle(
                    color: const Color(0xD9FFFFFF),
                    fontSize: 22.sp,
                  ),
                );
              }),
              SizedBox(height: 6.h),
              Obx(() {
                return MyMarqueeText(
                  text: ObjUtil.getStr(controller.subTitle.value),
                  textStyle: TextStyle(
                    color: const Color(0x99EEEEEE),
                    fontSize: 12.sp,
                  ),
                );
              }),
            ],
          ),
        ),
        SizedBox(width: 10.w),
        Image.asset(
          Assets.sideBLove,
          width: 24.w,
          height: 24.w,
        ),
        SizedBox(width: 20.w),
        Image.asset(
          Assets.sideBDownload,
          width: 24.w,
          height: 24.w,
        ),
      ],
    );
  }

  /// 进度条
  Widget _processBar(BuildContext context) {
    return Column(
      children: [
        SliderTheme(
          data: SliderTheme.of(context).copyWith(
            activeTrackColor: sideBSeedColor,
            inactiveTrackColor: const Color(0x4DFFFFFF),
            secondaryActiveTrackColor: sideBSeedColor.withOpacity(0.3),
            trackHeight: 3.h,
            thumbColor: Colors.white,
            thumbShape: RoundSliderThumbShape(
              disabledThumbRadius: 7.w,
              enabledThumbRadius: 7.w,
            ),
            trackShape: FullWidthTrackShape(),
          ),
          child: SizedBox(
            width: 1.sw,
            height: 7.w,
            child: Obx(() {
              return Slider(
                value: controller.musicPlayerController.positionDuration.value.inSeconds.toDouble(),
                secondaryTrackValue: controller.musicPlayerController.bufferedDuration.value.inSeconds.toDouble(),
                min: 0,
                max: controller.musicPlayerController.totalDuration.value.inSeconds.toDouble(),
                onChanged: (value) => controller.musicPlayerController.seekToPosition(value),
                onChangeStart: (value) => controller.musicPlayerController.seekStartEnd(0),
                onChangeEnd: (value) => controller.musicPlayerController.seekStartEnd(1),
              );
            }),
          ),
        ),
        SizedBox(height: 8.h),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Flexible(
              child: Obx(() {
                return Text(
                  controller.musicPlayerController.getPositionDuration(),
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                    color: const Color(0xD9FFFFFF),
                    fontSize: 12.sp,
                    fontWeight: FontWeight.w500,
                  ),
                );
              }),
            ),
            Flexible(
              child: Obx(() {
                return Text(
                  controller.musicPlayerController.getTotalDuration(),
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                    color: const Color(0x99FFFFFF),
                    fontSize: 12.sp,
                    fontWeight: FontWeight.w500,
                  ),
                );
              }),
            ),
          ],
        ),
      ],
    );
  }

  /// 播放控制器
  Widget _buildPlayController() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        GestureDetector(
          onTap: (){},
          child: Image.asset(
            Assets.sideBListLoop,
            width: 24.w,
            height: 24.w,
          ),
        ),
        GestureDetector(
          onTap: controller.nextTrack,
          child: Padding(
            padding: const EdgeInsets.only(left: 20).w,
            child: Image.asset(
              Assets.sideBPreviousSong,
              width: 20.w,
              height: 20.w,
            ),
          ),
        ),
        GestureDetector(
          onTap: controller.playPause,
          child: ClipOval(
            child: Container(
              width: 66.w,
              height: 66.w,
              color: Colors.white,
              child: FittedBox(
                fit: BoxFit.none,
                child: Obx(() {
                  return Image.asset(
                    controller.musicPlayerController.isPlaying.value ? Assets.sideBPausePlay : Assets.sideBStartPlay,
                    width: 26.w,
                    height: 26.w,
                  );
                }),
              ),
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(right: 20).w,
          child: GestureDetector(
            onTap: controller.nextTrack,
            child: Image.asset(
              Assets.sideBNextSong,
              width: 20.w,
              height: 20.w,
            ),
          ),
        ),
        GestureDetector(
          onTap: (){},
          child: Image.asset(
            Assets.sideBPlayList,
            width: 24.w,
            height: 24.w,
          ),
        ),
      ],
    );
  }
}
