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/my_marquee_text.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/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/res/themes/app_colors.dart';
import 'package:tone_snap/utils/date_util.dart';
import 'package:tone_snap/utils/obj_util.dart';

import 'custom_playlist_controller.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          _buildPlaylistInfo(),
          _buildPlayAllSearch(),
          _buildList(),
          const RemovePaddingMusicBar(),
        ],
      ),
    );
  }

  Widget _buildPlaylistInfo() {
    return SizedBox(
      height: 271.h,
      child: Stack(
        children: [
          _buildCoverBg(),
          MusicAppbar(
            actionOnTap: controller.onTapMore,
            action: Image.asset(
              Assets.sideBMore,
              width: 24.w,
              height: 24.w,
              color: Colors.white,
            ),
          ),
          Positioned(
            top: 80.h,
            left: 0,
            right: 0,
            child: Column(
              children: [
                _buildCover(),
                _buildTitle(),
                _buildSubtitle(),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildCoverBg() {
    return ClipRect(
      child: ImageFiltered(
        imageFilter: ImageFilter.blur(sigmaX: 12.w, sigmaY: 12.w),
        child: Obx(() {
          return NetworkImageWidget(
            url: controller.getFirstCoverUrl(),
            width: double.infinity,
            height: double.infinity,
          );
        }),
      ),
    );
  }

  Widget _buildCover() {
    return Obx(() {
      return NetworkImageWidget(
        url: controller.getFirstCoverUrl(),
        width: 120.w,
        height: 120.w,
        placeholderWidth: 60.w,
        placeholderHeight: 60.w,
        radius: 8.r,
      );
    });
  }

  Widget _buildTitle() {
    return Padding(
      padding: const EdgeInsets.only(top: 20.0).h,
      child: Obx(() {
        return MyMarqueeText(
          text: ObjUtil.getStr(controller.playlistModel.value!.title),
          textStyle: TextStyle(
            color: Colors.white,
            fontSize: 18.sp,
          ),
        );
      }),
    );
  }

  Widget _buildSubtitle() {
    return Padding(
      padding: const EdgeInsets.only(top: 2).h,
      child: Text(
        'Created in: ${controller.playlistModel.value!.milliseconds != null ? DateUtil.formatDateMs(controller.playlistModel.value!.milliseconds!) : ''}',
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
        style: TextStyle(
          color: Colors.white,
          fontSize: 12.sp,
        ),
      ),
    );
  }

  Widget _buildPlayAllSearch() {
    return SizedBox(
      height: 50.h,
      child: Obx(() {
        return Visibility(
          visible: controller.showSearch.value,
          replacement: Row(
            children: [
              SizedBox(width: 18.w),
              Expanded(
                child: Row(
                  children: [
                    _buildPlayAll(Assets.sideBPlaylistPlayAll, 'Play all', 0),
                    SizedBox(width: 10.w),
                    _buildPlayAll(Assets.sideBPlaylistPlayAllRandom, 'Shuffle Playback', 1),
                  ],
                ),
              ),
              GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: () => controller.onTapShowSearch(true),
                child: Container(
                  height: double.infinity,
                  padding: const EdgeInsets.symmetric(horizontal: 18).w,
                  child: Image.asset(
                    Assets.sideBSearch,
                    width: 24.w,
                    height: 24.w,
                  ),
                ),
              ),
            ],
          ),
          child: Row(
            children: [
              SizedBox(width: 18.w),
              Expanded(
                child: Container(
                  height: 25.h,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    color: const Color(0x1AFFFFFF),
                    borderRadius: BorderRadius.circular(12).r,
                  ),
                  child: TextField(
                    maxLines: 1,
                    controller: controller.textEditingController,
                    textInputAction: TextInputAction.done,
                    textAlign: TextAlign.start,
                    keyboardType: TextInputType.text,
                    style: TextStyle(color: seedColor, fontSize: 12.sp),
                    textAlignVertical: TextAlignVertical.center,
                    decoration: InputDecoration(
                      counterText: '',
                      hintText: 'name',
                      hintStyle: TextStyle(color: const Color(0xFF999999), fontSize: 12.sp,),
                      contentPadding: const EdgeInsets.symmetric(horizontal: 12).w,
                      isCollapsed: true,
                      border: InputBorder.none,
                    ),
                    onChanged: (text) {
                      controller.onTapSearch(text);
                    },
                  ),
                ),
              ),
              GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: () => controller.onTapShowSearch(false),
                child: Container(
                  height: double.infinity,
                  padding: const EdgeInsets.symmetric(horizontal: 18).w,
                  alignment: Alignment.center,
                  child: Text(
                    'Cancel',
                    style: TextStyle(
                      color: seedColor,
                      fontSize: 14.sp,
                    ),
                  ),
                ),
              ),
            ],
          ),
        );
      }),
    );
  }

  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,
        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 Visibility(
                child: ListView.builder(
                  itemCount: controller.musicList.length,
                  itemBuilder: (context, index) {
                    return MusicItem(
                      musicModel: controller.musicList[index],
                      playlistModelId: controller.playlistModel.value!.id,
                      onTapItem: () => controller.onTapItem(controller.musicList[index].value),
                    );
                  },
                ),
              );
            }),
          ),
        );
      }),
    );
  }

  // Widget _buildEmpty() {
  //   return Column(
  //     children: [
  //       SizedBox(height: 40.h),
  //       Text(
  //         'Nothing Yet',
  //         style: TextStyle(
  //           color: const Color(0x99FFFFFF),
  //           fontSize: 14.sp,
  //         ),
  //       ),
  //       SizedBox(height: 16.h),
  //       GestureDetector(
  //         onTap: controller.onTapAddSongs,
  //         child: Container(
  //           width: 122.w,
  //           height: 35.h,
  //           alignment: Alignment.center,
  //           decoration: BoxDecoration(
  //             borderRadius: BorderRadius.circular(40).r,
  //             border: Border.all(
  //               color: seedColor,
  //             ),
  //           ),
  //           child: Text(
  //             'Add Songs',
  //             style: TextStyle(
  //               color: seedColor,
  //               fontSize: 16.sp,
  //             ),
  //           ),
  //         ),
  //       ),
  //     ],
  //   );
  // }
}
