import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:tone_snap/components/keep_alive_wrapper.dart';
import 'package:tone_snap/components/my_custom_indicator.dart';
import 'package:tone_snap/components/network_image_widget.dart';
import 'package:tone_snap/generated/assets.dart';
import 'package:tone_snap/res/themes/app_colors.dart';
import 'package:tone_snap/utils/obj_util.dart';

import 'personal_music_library_controller.dart';

class PersonalMusicLibraryView extends GetView<PersonalMusicLibraryController> {
  const PersonalMusicLibraryView({super.key});

  @override
  Widget build(BuildContext context) {
    Get.put(PersonalMusicLibraryController());

    return Stack(
      children: [
        _buildPageBg(),
        SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              _buildTitle(),
              _buildModule(),
              _buildTabBar(),
              _buildTabBarView(),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildPageBg() {
    return Image.asset(
      Assets.sideBPersonalMusicLibraryBg,
      width: 1.sw,
      height: 1.sh,
      fit: BoxFit.cover,
    );
  }

  Widget _buildTitle() {
    return Padding(
      padding: EdgeInsets.symmetric(vertical: 12.h, horizontal: 16.w),
      child: Text(
        'Library',
        style: TextStyle(
          color: Colors.white,
          fontSize: 28.sp,
        ),
      ),
    );
  }

  Widget _buildModule() {
    return Padding(
      padding: EdgeInsets.symmetric(vertical: 28.h, horizontal: 16.w),
      child: Row(
        // mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          _buildModuleItem(0, Assets.sideBLoveSolid, () => controller.onTapModule(0)),
          SizedBox(width: 16.w),
          // _buildModuleItem(1, Assets.sideBArtists, () => controller.onTapModule(1)),
          _buildModuleItem(2, Assets.sideBOfflineDownload, () => controller.onTapModule(2)),
        ],
      ),
    );
  }

  Widget _buildModuleItem(int index, String labelImg, Function() onTap) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: 109.w,
        height: 109.w,
        clipBehavior: Clip.antiAlias,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8).r,
        ),
        child: Stack(
          children: [
            Center(
              child: Obx(() {
                String? url;
                if (index == 0) url = controller.loveSongsCoverUrl.value;
                if (index == 1) url = controller.artistsCoverUrl.value;
                if (index == 2) url = controller.offlineCoverUrl.value;
                return Stack(
                  children: [
                    NetworkImageWidget(
                      url: url,
                      width: 109.w,
                      height: 109.w,
                      radius: 8.r,
                      placeholderWidth: 55.w,
                      placeholderHeight: 55.w,
                      placeholderImg: Assets.sideBPlaceholderLibrary,
                    ),
                    Container(
                      color: const Color(0x66000000),
                    ),
                  ],
                );
              }),
            ),
            Positioned(
              bottom: 8.h,
              left: 8.w,
              right: 8.w,
              child: Row(
                children: [
                  Image.asset(
                    labelImg,
                    width: 20,
                    height: 20,
                  ),
                  SizedBox(width: 4.w),
                  Expanded(
                    child: Obx(() {
                      String? label;
                      if (index == 0) label = 'Songs ${controller.loveSongsTotal.value}';
                      if (index == 1) label = 'Artists ${controller.artistsTotal.value}';
                      if (index == 2) label = 'Offline ${controller.offlineTotal.value}';
                      return Text(
                        ObjUtil.getStr(label),
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 12.sp,
                          height: 1,
                        ),
                      );
                    }),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildTabBar() {
    return Container(
      height: 32.h,
      margin: const EdgeInsets.symmetric(vertical: 12).h,
      child: TabBar(
        controller: controller.tabController,
        tabAlignment: TabAlignment.center,
        dividerHeight: 0,
        padding: const EdgeInsets.symmetric(horizontal: 4).w,
        labelPadding: const EdgeInsets.symmetric(horizontal: 12).w,
        labelStyle: TextStyle(
          color: Colors.white,
          fontSize: 14.sp,
        ),
        unselectedLabelStyle: TextStyle(
          color: const Color(0xFF999999),
          fontSize: 14.sp,
        ),
        indicatorPadding: EdgeInsets.zero,
        indicator: MyCustomIndicator(
          indWidth: 16.w,
          indHeight: 2.h,
          color: seedColor,
          radius: 1.r,
        ),
        tabs: controller.labels.map((e) => Tab(text: e)).toList(),
      ),
    );
  }

  Widget _buildTabBarView() {
    return Expanded(
      child: TabBarView(
        controller: controller.tabController,
        children: controller.pages.map((e) => KeepAliveWrapper(child: e)).toList(),
      ),
    );
  }
}
