import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:keyboard/base/base_page.dart';
import 'package:keyboard/data/bean/keyboard_info.dart';
import 'package:keyboard/module/profile/profile_controller.dart';
import 'package:keyboard/utils/intimacy_util.dart';

import '../../resource/assets.gen.dart';
import '../../router/app_pages.dart';
import '../../utils/styles.dart';

class ProfilePage extends BasePage<ProfileController> {
  const ProfilePage({super.key});

  static start() {
    Get.toNamed(RoutePath.profile);
  }

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

  @override
  immersive() {
    return true;
  }

  @override
  Widget buildBody(BuildContext context) {
    return Stack(
      children: [
        SafeArea(
          child: CustomScrollView(
            physics: const BouncingScrollPhysics(), // 更流畅的滚动
            slivers: [
              SliverToBoxAdapter(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [_buildTitle(), SizedBox(height: 26.h)],
                ),
              ),

              // 键盘列表
              Obx(() {
                if (controller.keyboardInfoList.isEmpty) {
                  return const SliverToBoxAdapter(child: SizedBox());
                }
                return SliverList(
                  delegate: SliverChildBuilderDelegate((context, index) {
                    KeyboardInfo keyboardInfo =
                        controller.keyboardInfoList[index];
                    return Obx(() {
                      return _buildKeyboardListItem(
                        keyboardInfo,
                        keyboardInfo.id ==
                            controller.currentCustomKeyboardInfo.id,
                      );
                    });
                  }, childCount: controller.keyboardInfoList.length),
                );
              }),
            ],
          ),
        ),

        // 背景图片
        IgnorePointer(child: Assets.images.bgMine.image(width: 360.w)),
      ],
    );
  }

  _buildKeyboardListItem(KeyboardInfo keyboardInfo, bool isChoose) {
    return GestureDetector(
      onTap: () {
        controller.clickOnChangeKeyboard(keyboardInfo);
      },
      child: Container(
        height: 164.h,
        margin: EdgeInsets.only(left: 16.w, right: 16.w, bottom: 12.h),
        decoration:
            isChoose
                ? ShapeDecoration(
                  gradient: LinearGradient(
                    begin: Alignment(0.02, 0.04),
                    end: Alignment(1.00, 1.00),
                    colors: [const Color(0xFFE7A0FF), const Color(0xFFAB8FFA)],
                  ),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(22.r),
                  ),
                  shadows: [
                    BoxShadow(
                      color: Color(0x1CD6C1FF),
                      blurRadius: 4.r,
                      offset: Offset(0, 4.r),
                      spreadRadius: 0,
                    ),
                  ],
                )
                : ShapeDecoration(
                  color: Colors.white,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(20.r),
                  ),
                ),

        child: Stack(
          children: [
            isChoose
                ? Opacity(
                  opacity: 0.1,
                  child: Assets.images.bgProfileSelected.image(),
                )
                : SizedBox(),
            Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Padding(
                  padding: EdgeInsets.only(left: 16.w, right: 16.w, top: 10.h),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        '我&${keyboardInfo.name}',
                        style: TextStyle(
                          color: const Color(0xFF202020),
                          fontSize: 16.sp,
                          fontWeight: FontWeight.w700,
                        ),
                      ),
                      Container(
                        height: 26.h,
                        width: 55.w,
                        decoration: ShapeDecoration(
                          color:
                              isChoose ? Colors.white : const Color(0xFFF1F1F1),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(50.r),
                          ),
                        ),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Assets.images.iconProfileEdit.image(
                              width: 10.w,
                              height: 10.w,
                            ),
                            SizedBox(width: 4.w),
                            Text(
                              '编辑',
                              style: TextStyle(
                                color: Colors.black.withAlpha(178),
                                fontSize: 11,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
                SizedBox(height: 10.h),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 16.w),
                  child: Divider(
                    height: 1.h,
                    color: isChoose ? Colors.transparent : Color(0xffF5F5F5),
                  ),
                ),
                Expanded(
                  child: Container(
                    margin:
                        isChoose
                            ? EdgeInsets.only(
                              left: 4.w,
                              right: 4.w,
                              bottom: 4.w,
                            )
                            : EdgeInsets.all(0),
                    decoration: ShapeDecoration(
                      color: Colors.white,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20.r),
                      ),
                      shadows: [
                        BoxShadow(
                          color: Color(0x1CD6C1FF),
                          blurRadius: 4.r,
                          offset: Offset(0, 4),
                          spreadRadius: 0,
                        ),
                      ],
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Stack(
                          children: [
                            Container(
                              width: 78.w,
                              height: 78.w,
                              decoration: ShapeDecoration(
                                color:
                                    controller.userGender == 1
                                        ? Color(0xFFB7B6FF)
                                        : null,
                                gradient:
                                    controller.userGender == 1
                                        ? null
                                        : LinearGradient(
                                          begin: Alignment(0.50, -0.00),
                                          end: Alignment(0.50, 1.00),
                                          colors: [
                                            const Color(0xFFEBE6FF),
                                            const Color(0xFFFFE6FE),
                                          ],
                                        ),
                                shape: RoundedRectangleBorder(
                                  side: BorderSide(
                                    width: 1.5.w,
                                    color: Colors.white,
                                  ),
                                  borderRadius: BorderRadius.circular(40.r),
                                ),
                              ),
                              child:
                                  controller.userInfo?.imageUrl?.isNotEmpty ==
                                          true
                                      ? ClipRRect(
                                        borderRadius: BorderRadius.circular(
                                          40.r,
                                        ),
                                        child: CachedNetworkImage(
                                          width: 78.w,
                                          height: 78.w,
                                          imageUrl:
                                              controller.userInfo?.imageUrl ??
                                              "",
                                        ),
                                      )
                                      : SizedBox(),
                            ),
                            Positioned(
                              top: 0,
                              right: 0,
                              child:
                                  controller.userGender == 1
                                      ? Assets.images.iconProfileMale.image(
                                        width: 20.w,
                                        height: 20.w,
                                      )
                                      : Assets.images.iconProfileFemale.image(
                                        width: 20.w,
                                        height: 20.w,
                                      ),
                            ),
                          ],
                        ),
                        SizedBox(width: 8.w),
                        // 爱心
                        Container(
                          width: 87.w,
                          height: 71.h,
                          decoration: BoxDecoration(
                            image: DecorationImage(
                              image: Assets.images.bgProfileLove.provider(),
                            ),
                          ),
                          child: Column(
                            children: [
                              SizedBox(height: 45.h),
                              Container(
                                width: 47.w,
                                height: 19.h,
                                decoration: ShapeDecoration(
                                  color: Colors.white,
                                  shape: RoundedRectangleBorder(
                                    side: BorderSide(
                                      width: 1.18.w,
                                      color: const Color(0xFFFD649B),
                                    ),
                                    borderRadius: BorderRadius.circular(
                                      12.36.r,
                                    ),
                                  ),
                                ),
                                child:
                                    (keyboardInfo.intimacy != null)
                                        ? Center(
                                          child: Text(
                                            IntimacyUtil.getIntimacyName(
                                              keyboardInfo.intimacy!,
                                            ),
                                            style: TextStyle(
                                              color: const Color(0xFFFF73E0),
                                              fontSize: 11.sp,
                                              fontWeight: FontWeight.w500,
                                            ),
                                          ),
                                        )
                                        : SizedBox(),
                              ),
                            ],
                          ),
                        ),
                        SizedBox(width: 8.w),
                        keyboardInfo.avatar?.isNotEmpty == true
                            ? Stack(
                              children: [
                                Container(
                                  width: 78.w,
                                  height: 78.w,
                                  decoration: ShapeDecoration(
                                    color:
                                        keyboardInfo.gender == 1
                                            ? Color(0xFFB7B6FF)
                                            : null,
                                    gradient:
                                        keyboardInfo.gender == 1
                                            ? null
                                            : LinearGradient(
                                              begin: Alignment(0.50, -0.00),
                                              end: Alignment(0.50, 1.00),
                                              colors: [
                                                const Color(0xFFEBE6FF),
                                                const Color(0xFFFFE6FE),
                                              ],
                                            ),
                                    shape: RoundedRectangleBorder(
                                      side: BorderSide(
                                        width: 1.5.w,
                                        color: Colors.white,
                                      ),
                                      borderRadius: BorderRadius.circular(40.r),
                                    ),
                                  ),
                                  child: ClipRRect(
                                    borderRadius: BorderRadius.circular(40.r),
                                    child: CachedNetworkImage(
                                      imageUrl: keyboardInfo.avatar!,
                                    ),
                                  ),
                                ),
                                Positioned(
                                  top: 0,
                                  left: 0,
                                  child:
                                      keyboardInfo.gender == 1
                                          ? Assets.images.iconProfileMale.image(
                                            width: 20.w,
                                            height: 20.w,
                                          )
                                          : Assets.images.iconProfileFemale
                                              .image(width: 20.w, height: 20.w),
                                ),
                              ],
                            )
                            : SizedBox(width: 78.w, height: 78.w),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  _buildTitle() {
    return Container(
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.only(top: 12.h, left: 16.w, right: 16.w),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          GestureDetector(
            onTap: controller.clickBack,
            child: Assets.images.iconMineBackArrow.image(
              width: 24.w,
              height: 24.w,
            ),
          ),
          Text("我", style: Styles.getTextStyleBlack204W500(17.sp)),
          SizedBox(),
          GestureDetector(
            onTap: controller.clickAddButton,
            child: Assets.images.iconProfileAdd.image(
              width: 24.w,
              height: 24.w,
            ),
          ),
        ],
      ),
    );
  }
}
