import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
import 'package:get/get_rx/src/rx_types/rx_types.dart';
import 'package:get/get_state_manager/src/rx_flutter/rx_obx_widget.dart';
import 'package:keyboard/data/bean/keyboard_info.dart';
import 'package:keyboard/data/repository/characters_repository.dart';
import 'package:keyboard/data/repository/keyboard_repository.dart';
import 'package:keyboard/utils/toast_util.dart';

import '../../resource/assets.gen.dart';
import '../../resource/string.gen.dart';
import '../../utils/http_handler.dart';
import '../../utils/styles.dart';

class CustomCharacterAnotherAddDialog {
  static const tag = "CustomCharacterAnotherAddDialog";
  static RxInt selectedIndex = RxInt(0);
  static Rx<KeyboardInfo> selectKeyboard = KeyboardInfo().obs;

  static show({required String customCharacterId}) {
    SmartDialog.show(
      backType: SmartBackType.block,
      clickMaskDismiss: true,
      alignment: Alignment.bottomCenter,
      animationType: SmartAnimationType.centerScale_otherSlide,
      tag: tag,
      keepSingle: true,
      builder:
          (_) => Container(
            height: 472.h,
            decoration: ShapeDecoration(
              color: Color(0xFFF6F5FA),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(18.r),
                  topRight: Radius.circular(18.r),
                ),
              ),
            ),
            child: Column(
              children: [
                Container(
                  padding: EdgeInsets.only(
                    left: 16.w,
                    right: 16.w,
                    top: 22.w,
                    bottom: 20.w,
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Assets.images.iconCustomCharacterAddDialogTitle.image(
                        width: 85.w,
                        height: 25.w,
                        fit: BoxFit.contain,
                      ),
                      GestureDetector(
                        onTap: () {
                          SmartDialog.dismiss(tag: tag);
                        },
                        child: Assets.images.iconCustomCharacterAddDialogClose
                            .image(
                              width: 24.w,
                              height: 24.w,
                              fit: BoxFit.contain,
                            ),
                      ),
                    ],
                  ),
                ),
                Expanded(
                  child: Stack(
                    children: [
                      ListView.separated(
                        padding: EdgeInsets.only(bottom: 100.h),
                        itemCount:
                            KeyboardRepository.getInstance()
                                .keyboardInfoList
                                .length,
                        itemBuilder: (context, index) {
                          return _buildListItem(
                            keyboardInfo:
                                KeyboardRepository.getInstance()
                                    .keyboardInfoList[index],
                            index: index,
                          );
                        },
                        separatorBuilder: (BuildContext context, int index) {
                          if (index ==
                              KeyboardRepository.getInstance()
                                      .keyboardInfoList
                                      .length -
                                  1) {
                            return SizedBox(
                              width: double.infinity,
                              height: 50.h, // 最后一个元素后面加50空白
                            );
                          } else {
                            return SizedBox(
                              width: double.infinity,
                              height: 10.h,
                            );
                          }
                        },
                      ),
                      Positioned(
                        bottom: 20.h,
                        left: 16.w,
                        right: 16.w,
                        child: InkWell(
                          onTap: () async {
                            if (selectKeyboard.value.id == null) {
                              return ToastUtil.show("请选择键盘");
                            }
                            try {
                              await CharactersRepository.getInstance()
                                  .addCustomCharacter(
                                    characterId: customCharacterId,
                                    keyboardId: selectKeyboard.value.id!,
                                  );
                              ToastUtil.show("添加成功");
                              SmartDialog.dismiss(tag: tag);
                            } catch (error) {
                              if (error is ServerErrorException) {
                                ToastUtil.show(error.message);
                              }
                            }
                          },
                          child: Container(
                            height: 48.h,
                            alignment: Alignment.center,
                            decoration: Styles.getActivateButtonDecoration(
                              31.r,
                            ),
                            child: Text(
                              StringName.confirmAdd,
                              style: Styles.getTextStyleWhiteW500(16.sp),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
    );
  }

  static Widget _buildListItem({
    required KeyboardInfo keyboardInfo,
    required int index,
  }) {
    return GestureDetector(
      onTap: () {
        selectKeyboard.value = keyboardInfo;
        selectedIndex.value = index;
      },
      child: Obx(() {
        return Container(
          margin: EdgeInsets.only(left: 16.w, right: 16.w),
          decoration: ShapeDecoration(
            color: Colors.white,
            shape: RoundedRectangleBorder(
              // 只有选中的项目才显示紫色边框
              side: BorderSide(
                width: selectedIndex.value == index ? 2 : 0,
                color:
                    selectedIndex.value == index
                        ? const Color(0xFF7D46FC)
                        : Colors.transparent,
              ),
              borderRadius: BorderRadius.circular(12.r),
            ),
          ),
          height: 88.h,
          padding: EdgeInsets.symmetric(horizontal: 16.w),
          child: Row(
            children: [
              _buildAvatar(imageUrl: keyboardInfo.imageUrl),
              SizedBox(width: 8.w),
              _buildKeyboardInfo(keyboardInfo),
              selectedIndex.value == index
                  ? Assets.images.iconCustomCharacterAddDialogSelect.image(
                    width: 26.w,
                    height: 26.w,
                    fit: BoxFit.contain,
                  )
                  : SizedBox(),
            ],
          ),
        );
      }),
    );
  }

  /// 角色头像
  static Widget _buildAvatar({required String? imageUrl}) {
    return Container(
      width: 60.r,
      height: 60.r,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8.r),
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [Color(0xffebe6ff), Color(0xffffe6fe)],
        ),
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(8.r), // 可调整圆角大小
        child: CachedNetworkImage(
          imageUrl: imageUrl ?? "",
          width: 60.r,
          height: 60.r,
          fit: BoxFit.contain,
          errorWidget:
              (_, __, ___) => Assets.images.iconSystemKeyboard.image(
                width: 60.r,
                height: 60.r,
                fit: BoxFit.contain,
              ),
        ),
      ),
    );
  }

  static Widget _buildKeyboardInfo(KeyboardInfo keyboardInfo) {
    return Expanded(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Text(
                keyboardInfo.name ?? "",
                style: TextStyle(
                  color: Colors.black.withAlpha(204),
                  fontSize: 15.sp,
                  fontWeight: FontWeight.w500,
                ),
              ),
              SizedBox(width: 4.w),
            ],
          ),
        ],
      ),
    );
  }
}