import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:keyboard/base/base_view.dart';
import 'package:keyboard/dialog/content/character_add_tab_controller.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../data/bean/keyboard_info.dart';
import '../../data/repository/characters_repository.dart';
import '../../data/repository/keyboard_repository.dart';
import '../../di/get_it.dart';
import '../../resource/assets.gen.dart';
import 'character_tab_group_content_view.dart';

// 人设列表弹窗使用的Tab
class CharacterAddTabView extends BaseView<CharacterAddTabController> {

  final KeyboardInfo currentKeyboardInfo;

  @override
  String? get tag => "CharacterAddTabController ${currentKeyboardInfo.id}";
  const CharacterAddTabView({super.key, required this.currentKeyboardInfo}) ;

  @override
  backgroundColor() => Colors.transparent;

  @override
  Widget buildBody(BuildContext context) {
    Get.delete<CharacterAddTabController>(tag: tag);
    Get.put(CharacterAddTabController(
        getIt.get<CharactersRepository>(),
        getIt.get<KeyboardRepository>(),
        currentKeyboardInfo: currentKeyboardInfo),
        tag: tag);

    return Column(children: [
      _tabBar(),

      Expanded(child: _pages())
    ]);
  }


  /// **TabBar**
  Widget _tabBar() {
    return Obx(() {
      if (controller.characterGroupList.isEmpty) {
        return const SizedBox.shrink();
      }
      return TabBar(
        controller: controller.tabController.value,
        dividerHeight: 0,
        tabAlignment: TabAlignment.start,
        isScrollable: true,
        padding: EdgeInsets.symmetric(horizontal: 12.w),
        labelPadding: EdgeInsets.symmetric(horizontal: 4.w),
        indicator: const BoxDecoration(),

        onTap: (index) => controller.onTabChanged(index),
        tabs: List.generate(controller.characterGroupList.length, (index) {
          var e = controller.characterGroupList[index];
          bool isSelected = index == controller.currentTabBarIndex.value;
          return Column(
            children: [
              Container(

                height: isSelected ? 38.h : 32.h,
                padding:
                isSelected ? EdgeInsets.only(bottom: 4.h,left: 15.w,right: 15.w) :EdgeInsets.only(left: 15.w,right: 15.w),
                decoration:
                    isSelected
                        ? BoxDecoration(
                          borderRadius: BorderRadius.circular(36.r),
                          image: DecorationImage(
                            image:
                                Assets.images.iconCharacterGroupSelected
                                    .provider(),
                            fit: BoxFit.fill,
                          ),
                        )
                        : BoxDecoration(
                          color: Colors.white.withAlpha(204),
                          borderRadius: BorderRadius.circular(36.r),
                        ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    if (e.iconUrl != null)
                      CachedNetworkImage(
                        imageUrl: e.iconUrl!,
                        width: 20.r,
                        height: 20.r,
                      ),

                    Text(
                      e.name ?? "",
                      style: TextStyle(
                        color:
                            isSelected
                                ? Colors.black
                                : Colors.black.withAlpha(104),
                        fontSize: 14.sp,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                  ],
                ),
              ),
              !isSelected ? SizedBox(height: 4.h) : SizedBox(),
            ],
          );
        }),
      );
    });
  }

  Widget _pages() {
    return Obx(() {
      if (controller.characterGroupList.isEmpty) {
        return const Center(child: CircularProgressIndicator());
      }
      return Padding(
        padding: const EdgeInsets.only(top: 8.0),
        child: PageView(
          controller: controller.pageController,
          onPageChanged: (index) {
            controller.onPageChanged(index);
          },
          children:
              controller.characterGroupList.map((group) {

                return CharacterTabGroupContentView(
                  currentKeyboardInfo: controller.currentKeyboardInfo,
                  characterGroupInfo: group,
                );
              }).toList(),
        ),
      );
    });
  }
}