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/base_scrollbar.dart';
import 'package:tone_snap/components/music_bar.dart';
import 'package:tone_snap/components/my_marquee_text.dart';
import 'package:tone_snap/components/network_image_widget.dart';
import 'package:tone_snap/data/models/music_model.dart';
import 'package:tone_snap/generated/assets.dart';
import 'package:tone_snap/modules/sideb/album/album_controller.dart';
import 'package:tone_snap/modules/sideb/controllers/music_player_controller.dart';
import 'package:tone_snap/modules/sideb/widgets/music_appbar.dart';
import 'package:tone_snap/res/themes/app_colors.dart';
import 'package:tone_snap/res/themes/app_sizes.dart';
import 'package:tone_snap/utils/obj_util.dart';

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

  final controller = Get.find<AlbumController>();
  final musicPlayerController = MusicPlayerController.to;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Obx(() {
          return NetworkImageWidget(
            url: controller.bgThumbnail.value,
            width: 1.sw,
            height: 413.h,
            noPlaceholder: true,
          );
        }),
        Scaffold(
          backgroundColor: Colors.transparent,
          body: Column(
            children: [
              const MusicAppbar(),
              SizedBox(height: 152.h),
              _buildIntroduction(),
              _buildList(),
              Obx(() {
                return Visibility(
                  visible: MusicBar().isShow.value,
                  child: SizedBox(height: paddingBottomMusicBarHeight(context)),
                );
              }),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildIntroduction() {
    return Stack(
      children: [
        ClipRect(
          child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
            child: ClipRRect(
              borderRadius: BorderRadius.only(topLeft: Radius.circular(16.r), topRight: Radius.circular(16.r)),
              child: Image.asset(
                Assets.sideBAlbumTitleBg,
                width: 1.sw,
                height: 173.h,
                fit: BoxFit.fitWidth,
              ),
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 18).w,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(height: 18.h),
              Obx(() {
                return Text(
                  ObjUtil.getStr(controller.title.value),
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 22.sp,
                    fontWeight: FontWeight.w500,
                  ),
                );
              }),
              SizedBox(height: 12.h),
              Obx(() {
                return Text(
                  ObjUtil.getStr(controller.description.value),
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                    color: const Color(0x99FFFFFF),
                    fontSize: 12.sp,
                  ),
                );
              }),
              SizedBox(height: 24.h),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                    width: 138.w,
                    height: 32.h,
                    padding: const EdgeInsets.symmetric(horizontal: 4).w,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(16).r,
                      color: const Color(0x1A80F988),
                    ),
                    child: Row(
                      children: [
                        Image.asset(
                          Assets.sideBAlbumTotal,
                          width: 24.w,
                          height: 24.w,
                        ),
                        SizedBox(width: 4.w),
                        Expanded(
                          child: Obx(() {
                            return Text(
                              'Play all (${controller.albumList.length})',
                              maxLines: 1,
                              overflow: TextOverflow.ellipsis,
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 14.sp,
                              ),
                            );
                          }),
                        ),
                      ],
                    ),
                  ),
                  Image.asset(
                    Assets.sideBNotCollectionAlbum,
                    width: 24.w,
                    height: 24.w,
                  ),
                ],
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildList() {
    return Expanded(
      child: Container(
        color: const Color(0xFF121212),
        child: BaseScrollbar(
          child: Obx(() {
            return ListView.builder(
              itemCount: controller.albumList.length,
              itemBuilder: (context, index) {
                return _buildListItem(index, controller.albumList[index]);
              },
            );
          }),
        ),
      ),
    );
  }

  Widget _buildListItem(int index, MusicModel model) {
    return Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: () => controller.onTapAlbumItem(index, model),
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 8).h,
          child: Row(
            children: [
              SizedBox(width: 18.w),
              Text(
                (index + 1).toString(),
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16.sp,
                ),
              ),
              SizedBox(width: 12.w),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Obx(() {
                      return MyMarqueeText(
                        enable: musicPlayerController.musicModel.value.videoId == model.videoId,
                        text: ObjUtil.getStr(model.title),
                        textStyle: TextStyle(
                          color: musicPlayerController.musicModel.value.videoId == model.videoId
                              ? seedColor
                              : Colors.white,
                          fontSize: 14.sp,
                        ),
                      );
                    }),
                    SizedBox(height: 8.h),
                    Obx(() {
                      return MyMarqueeText(
                        enable: musicPlayerController.musicModel.value.videoId == model.videoId,
                        text: ObjUtil.getStr(model.subTitle),
                        textStyle: TextStyle(
                          color: musicPlayerController.musicModel.value.videoId == model.videoId
                              ? seedColor
                              : const Color(0x99FFFFFF),
                          fontSize: 12.sp,
                        ),
                      );
                    }),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}