import 'package:dotted_border/dotted_border.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:keyboard/base/base_page.dart';
import 'package:keyboard/module/change/hobbies/change_hobbies_controller.dart';
import 'package:get/get.dart';

import '../../../data/bean/custom_config_info.dart';
import '../../../resource/assets.gen.dart';
import '../../../resource/string.gen.dart';
import '../../../router/app_pages.dart';
import '../../../utils/styles.dart';

class ChangeHobbiesPage extends BasePage<ChangeHobbiesController> {
  const ChangeHobbiesPage({super.key});

  static Future start({List<Hobbies>? hobbies}) async {
    return Get.toNamed(
      RoutePath.changeHobbies,
      arguments: {"hobbies": hobbies},
    );
  }

  @override
  bool immersive() {
    return true;
  }

  @override
  Color backgroundColor() {
    return const Color(0xFFF6F5FA);
  }

  @override
  Widget buildBody(BuildContext context) {
    return Stack(
      children: [
        IgnorePointer(child: Assets.images.bgMine.image(width: 360.w)),
        SafeArea(
          child: Stack(
            children: [
              Column(
                children: [
                  _buildTitle(),
                  SizedBox(height: 40.h),
                  Text('兴趣爱好', style: Styles.getTextStyleBlack204W500(22.sp)),
                  SizedBox(height: 50.h),
                  _buildCurrentHobbies(),
                  SizedBox(height: 20.h),
                  _buildDivider(),
                  Expanded(
                    child: SingleChildScrollView(
                      child: _buildSelectionPage(
                        items: controller.hobbiesLabelsList,
                        selectedLabels: controller.hobbiesSelectLabels,
                        onSelected: (item) {
                          controller.selectHobby(item);
                        },
                        isCustomEnabled: true,

                        isShowEmoji: true,
                      ),
                    ),
                  ),

                  SizedBox(height: 100.h),
                ],
              ),
              Align(
                alignment: Alignment.bottomCenter,
                child: Container(
                  margin: EdgeInsets.only(bottom: 32.h),
                  child: Obx(() {
                    return _buildSaveButton(
                      onTap: () {
                        controller.clickSave();
                      },
                      isEnable: controller.hobbiesSelectLabels.isNotEmpty,
                    );
                  }),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  _buildTitle() {
    return Container(
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.only(top: 12.h, left: 16.w, right: 16.w),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          GestureDetector(
            onTap: controller.clickBack,
            child: Assets.images.iconMineBackArrow.image(
              width: 24.w,
              height: 24.w,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildSaveButton({required VoidCallback onTap, required isEnable}) {
    return GestureDetector(
      onTap: () {
        onTap();
      },
      child: Container(
        width: 260.w,
        height: 48.h,
        decoration:
            isEnable
                ? Styles.getActivateButtonDecoration(31.r)
                : Styles.getInactiveButtonDecoration(31.r),
        child: Center(
          child: Text(
            '保存',
            style: TextStyle(
              color: Colors.white,
              fontSize: 16.sp,
              fontWeight: FontWeight.w500,
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildSelectionPage({
    required List<dynamic> items,
    required RxList<dynamic> selectedLabels,
    required Function(dynamic) onSelected,
    required bool isCustomEnabled,

    required bool isShowEmoji,
  }) {
    return Obx(() {
      return Column(
        children: [
          Container(
            margin: EdgeInsets.only(top: 20.h, left: 18.w, right: 18.w),
            alignment: Alignment.center,
            child: GridView.count(
              physics: NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              crossAxisCount: 3,
              crossAxisSpacing: 6.r,
              mainAxisSpacing: 10.r,
              childAspectRatio: 2.6,

              children: [
                ...items.map((item) {
                  final emoji = item.emoji ?? "";
                  final name = item.name ?? "";
                  return Obx(() {
                    bool isSelected = selectedLabels.contains(item);
                    return ChoiceChip(
                      padding: EdgeInsets.zero,
                      label: SizedBox(
                        width: 140.w,

                        child: Center(
                          child: Text(
                            isShowEmoji ? "$emoji$name" : name,
                            overflow: TextOverflow.ellipsis,
                            maxLines: 1,
                            style: TextStyle(
                              color:
                                  isSelected
                                      ? Color(0xFF7D46FC)
                                      : Colors.black.withValues(alpha: 0.8),
                              fontSize: 14.sp,
                              fontWeight: FontWeight.w400,
                            ),
                          ),
                        ),
                      ),
                      showCheckmark: false,
                      selected: isSelected,
                      selectedColor: Color(0xFFEDE8FF),
                      backgroundColor: Colors.white,
                      shape: RoundedRectangleBorder(
                        side: BorderSide(width: 0.w, color: Colors.transparent),
                        borderRadius: BorderRadius.circular(31.r),
                      ),
                      onSelected: (selected) {
                        onSelected(item);
                      },
                    );
                  });
                }),
              ],
            ),
          ),
        ],
      );
    });
  }

  Widget _buildDivider() {
    return Container(
      margin: EdgeInsets.only(top: 8.h, bottom: 8.h),
      width: 304.w,
      decoration: ShapeDecoration(
        shape: RoundedRectangleBorder(
          side: BorderSide(
            width: 0.5.w,
            strokeAlign: BorderSide.strokeAlignCenter,
            color: const Color(0xffDDDCE1),
          ),
        ),
      ),
    );
  }

  // 添加爱好
  Widget _buildCustom(VoidCallback onCustomClick) {
    return GestureDetector(
      onTap: onCustomClick,
      child: DottedBorder(
        color: const Color(0xFFC9C2DB),
        strokeWidth: 1.0.w,
        padding: EdgeInsets.symmetric(horizontal: 11.w, vertical: 8.h),
        borderType: BorderType.RRect,
        radius: Radius.circular(70.r),
        child: Container(
          alignment: Alignment.center,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Assets.images.iconCharacterCustomPlus.image(
                width: 18.w,
                height: 18.w,
              ),
              Text(
                StringName.addHobbies,
                style: TextStyle(
                  color: const Color(0xFFC9C2DB),
                  fontSize: 14.sp,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  _buildCurrentHobbies() {
    return Row(
      children: [
        Obx(() {
          return Expanded(
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Padding(
                padding: EdgeInsets.only(left: 16.w),
                child: Row(
                  children: [
                  controller.currentCharacterCustomConfig?.customHobby==true?
                    _buildCustom(() {
                      controller.clickHobbiesCustom();
                    }):SizedBox(),
                    ...controller.hobbiesSelectLabels.map((item) {
                      return Container(
                        margin: EdgeInsets.only(left: 8.w),
                        child: Obx(() {
                          final isSelected = controller.hobbiesLabelsList
                              .contains(item);
                          return GestureDetector(
                            onTap: () => controller.selectHobby(item),
                            child: Container(
                              padding: EdgeInsets.symmetric(
                                horizontal: 11.w,
                                vertical: 8.h,
                              ),
                              decoration: BoxDecoration(
                                gradient:
                                    isSelected
                                        ? LinearGradient(
                                          colors: [
                                            Color(0xFF7D46FC),
                                            Color(0xFFBC87FF),
                                          ],
                                          begin: Alignment.centerLeft,
                                          end: Alignment.centerRight,
                                        )
                                        : null,
                                color: isSelected ? null : Colors.white,
                                borderRadius: BorderRadius.circular(70.r),
                                border: Border.all(
                                  color: Colors.transparent,
                                  width: 0,
                                ),
                              ),
                              child: Row(
                                children: [
                                  Text(
                                    "${item.emoji ?? ""}${item.name}",
                                    style: TextStyle(
                                      color:
                                          isSelected
                                              ? Colors.white
                                              : Color(0xFF755BAB),
                                      fontSize: 14.sp,
                                      fontWeight: FontWeight.w400,
                                    ),
                                  ),
                                  Assets.images.iconChangeHobbiesUnselect.image(
                                    width: 14.w,
                                    height: 14.h,
                                  ),
                                ],
                              ),
                            ),
                          );
                        }),
                      );
                    }),
                  ],
                ),
              ),
            ),
          );
        }),
      ],
    );
  }
}