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 'personal_music_library_controller.dart';

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

  @override
  Widget build(BuildContext context) {
    Get.find<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,
      fit: BoxFit.fitWidth,
    );
  }

  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('', Assets.sideBLoveSolid, 'Songs 122', () => controller.onTapModule(0)),
          _buildModuleItem('', Assets.sideBArtists, 'Artists 122', () => controller.onTapModule(1)),
          _buildModuleItem('', Assets.sideBOfflineDownload, 'Offline 122', () => controller.onTapModule(2)),
        ],
      ),
    );
  }

  Widget _buildModuleItem(String url, String labelImg, String label, Function() onTap) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: 109.w,
        height: 109.w,
        decoration: BoxDecoration(
          color: const Color(0xFF242529),
          borderRadius: BorderRadius.circular(8).r,
        ),
        child: Stack(
          children: [
            Center(
              child: NetworkImageWidget(
                url: url,
                width: 55.w,
                height: 55.w,
                placeholder: Assets.sideBPlaceholderLibrary,
              ),
            ),
            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: Text(
                      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(),
      ),
    );
  }
}
