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/network_image_widget.dart';
import 'package:tone_snap/components/view_state_widget.dart';
import 'package:tone_snap/generated/assets.dart';
import 'package:tone_snap/modules/sideb/album_song_list/album_song_list_controller.dart';
import 'package:tone_snap/modules/sideb/widgets/music_appbar.dart';
import 'package:tone_snap/modules/sideb/widgets/music_item.dart';
import 'package:tone_snap/modules/sideb/widgets/remove_padding_music_bar.dart';
import 'package:tone_snap/utils/obj_util.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF121212),
      body: Column(
        children: [
          SizedBox(
            height: 413.h,
            child: Stack(
              children: [
                _buildPageBgImg(),
                Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    const MusicAppbar(),
                    _buildPlaylistInfo(),
                  ],
                ),
              ],
            ),
          ),
          _buildList(),
          const RemovePaddingMusicBar(),
        ],
      ),
    );
  }

  /// 封面图
  Widget _buildPageBgImg() {
    return Obx(() {
      return NetworkImageWidget(
        url: controller.coverUrl.value,
        width: 1.sw,
        height: double.infinity,
        fit: BoxFit.cover,
      );
    });
  }

  Widget _buildPlaylistInfo() {
    return ClipRect(
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
        child: Container(
          height: 173.h,
          padding: EdgeInsets.symmetric(horizontal: 18.w, vertical: 18.h),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(topLeft: Radius.circular(16.r), topRight: Radius.circular(16.r)),
            image: const DecorationImage(
              image: AssetImage(
                Assets.sideBPlaylistTitleBg,
              ),
              fit: BoxFit.cover,
            ),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              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: 10.h),
              Expanded(
                child: Obx(() {
                  return Text(
                    ObjUtil.getStr(controller.description.value),
                    maxLines: 3,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      color: const Color(0x99FFFFFF),
                      fontSize: 12.sp,
                    ),
                  );
                }),
              ),
              SizedBox(height: 10.h),
              Row(
                children: [
                  _buildPlayAll(Assets.sideBPlaylistPlayAll, 'Play all', 0),
                  SizedBox(width: 10.w),
                  _buildPlayAll(Assets.sideBPlaylistPlayAllRandom, 'Shuffle Playback', 1),
                  const Spacer(),
                  ClipOval(
                    child: Material(
                      color: Colors.transparent,
                      child: InkWell(
                        onTap: controller.onTapCollect,
                        child: Padding(
                          padding: const EdgeInsets.all(6).w,
                          child: Obx(() {
                            return Image.asset(
                              controller.isCollect.value ? Assets.sideBCollected : Assets.sideBNotCollectionAlbum,
                              width: 24.w,
                              height: 24.w,
                            );
                          }),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildPlayAll(String img, String label, int type) {
    return GestureDetector(
      onTap: () => controller.onTapPlayAll(type),
      child: Container(
        width: 100.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(
              img,
              width: 24.w,
              height: 24.w,
            ),
            SizedBox(width: 4.w),
            Expanded(
              child: Obx(() {
                return Text(
                  '$label (${controller.musicList.length})',
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 14.sp,
                  ),
                );
              }),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildList() {
    return Expanded(
      child: Obx(() {
        return ViewStateWidget(
          viewState: controller.viewState.value,
          child: BaseScrollbar(
            child: Obx(() {
              return ListView.builder(
                itemCount: controller.musicList.length,
                itemBuilder: (context, index) {
                  return MusicItem(
                    musicModel: controller.musicList[index],
                    onTapItem: () => controller.onTapItem(controller.musicList[index].value),
                  );
                },
              );
            }),
          ),
        );
      }),
    );
  }
}
