import 'package:clean/base/base_page.dart';
import 'package:clean/module/contact/incomplete/controller.dart';
import 'package:clean/resource/assets.gen.dart';
import 'package:clean/utils/expand.dart';
import 'package:flutter/Material.dart';
import 'package:flutter_contacts/contact.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
import 'package:get/get.dart';

class ContactIncompletePage extends BasePage<ContactInCompleteController> {
  const ContactIncompletePage({super.key});

  @override
  bool immersive() {
    return true;
  }

  @override
  bool statusBarDarkFont() => false;

  @override
  Widget buildBody(BuildContext context) {
    return Stack(
      children: [
        buildMain(context),
        IgnorePointer(
          child: Assets.images.bgHome.image(
            width: 360.w,
          ),
        ),
      ],
    );
  }

  Widget buildMain(BuildContext context) {
    return SafeArea(
      child: Container(
        padding: EdgeInsets.only(left: 16.w, top: 14.h, right: 16.w),
        child: Obx(() {
          return Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              !controller.isEdit.value
                  ? Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        GestureDetector(
                          onTap: () {
                            Get.back();
                          },
                          child: Assets.images.iconCommonBack
                              .image(width: 28.w, height: 28.w),
                        ),
                        GestureDetector(
                          onTap: () {
                            controller.isEdit.value = true;
                          },
                          child: Container(
                            width: 71.w,
                            height: 30.h,
                            decoration: BoxDecoration(
                              color: "#1F2D3F".color,
                              borderRadius: BorderRadius.all(
                                Radius.circular(15.h),
                              ),
                            ),
                            child: Center(
                              child: Text(
                                "Select",
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 14.sp,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    )
                  : Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        GestureDetector(
                          onTap: () {
                            controller.isEdit.value = false;
                          },
                          child: Container(
                            width: 71.w,
                            height: 30.h,
                            decoration: BoxDecoration(
                              color: "#1F2D3F".color,
                              borderRadius: BorderRadius.all(
                                Radius.circular(15.h),
                              ),
                            ),
                            child: Center(
                              child: Text(
                                "Cancel",
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 14.sp,
                                ),
                              ),
                            ),
                          ),
                        ),
                        GestureDetector(
                          onTap: () {
                            controller.toggleSelectAll();
                          },
                          child: Text(
                            controller.isAllSelected.value
                                ? "Deselect all"
                                : "Select All",
                            style: TextStyle(
                              color: Colors.white.withValues(alpha: 0.65),
                              fontSize: 14.sp,
                            ),
                          ),
                        ),
                      ],
                    ),
              SizedBox(
                height: 12.h,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    "Incomplete Contacts",
                    style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.w700,
                      fontSize: 24.sp,
                    ),
                  ),
                ],
              ),
              Expanded(
                child: Row(
                  children: [
                    Expanded(
                      child: Obx(() {
                        return ScrollablePositionedList.builder(
                          itemCount: controller.initials.length,
                          itemScrollController: controller.itemScrollController,
                          itemPositionsListener:
                              controller.itemPositionsListener,
                          itemBuilder: (context, index) {
                            if (controller.initials.isEmpty) {
                              return Container();
                            }
                            String initial = controller.initials[index];
                            // 当前首字母对应的联系人列表
                                controller.groupedContacts[initial];
                            return Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                SizedBox(
                                  height: 12.h,
                                ),
                                Padding(
                                  padding: EdgeInsets.symmetric(vertical: 8.h),
                                  child: Text(
                                    initial,
                                    style: TextStyle(
                                      color: Colors.white.withOpacity(0.7),
                                      fontSize: 14.sp,
                                      fontWeight: FontWeight.w500,
                                    ),
                                  ),
                                ),
                                ...controller.groupedContacts[initial]!
                                    .asMap()
                                    .entries
                                    .map((entry) {
                                  int index = entry.key; // 当前联系人的索引
                                  Contact contact = entry.value; // 当前联系人
                                  bool isFirst = index == 0; // 是否是第一个
                                  bool isLast = index ==
                                      (controller.groupedContacts[initial]
                                                  ?.length ??
                                              0) -
                                          1; // 是否是最后一个
                                  return Container(
                                    padding: EdgeInsets.all(10.w),
                                    width: double.infinity,
                                    // height: 62.h,
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.vertical(
                                        top: isFirst
                                            ? Radius.circular(12)
                                            : Radius.zero, // 第一个设置上圆角
                                        bottom: isLast
                                            ? Radius.circular(12)
                                            : Radius.zero, // 最后一个设置下圆角
                                      ),
                                      color: Colors.white.withValues(alpha: 0.12),
                                    ),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        Column(
                                          mainAxisAlignment:
                                              MainAxisAlignment.start,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Text(
                                              contact.displayName ?? '未命名',
                                              style: TextStyle(
                                                color: Colors.white,
                                                fontSize: 14.sp,
                                                fontWeight: FontWeight.w500,
                                              ),
                                            ),
                                            SizedBox(
                                              height: 5.h,
                                            ),
                                            Text(
                                              contact.phones.isEmpty
                                                  ? 'No contact number'
                                                  : contact.phones.first.number,
                                              style: TextStyle(
                                                color: Colors.white,
                                                fontSize: 14.sp,
                                                fontWeight: FontWeight.w500,
                                              ),
                                            ),
                                          ],
                                        ),
                                        // 删除按钮
                                        Visibility(
                                          visible: controller.isEdit.value,
                                          child: GestureDetector(
                                            onTap: () {
                                              controller
                                                  .toggleSelectContact(contact);
                                            },
                                            child: Container(
                                              child: controller.selectedContacts
                                                      .contains(contact.id)
                                                  ? Center(
                                                      child: Assets
                                                          .images.iconSelected
                                                          .image(
                                                        width: 16.w,
                                                        height: 16.h,
                                                      ),
                                                    )
                                                  : Center(
                                                      child: Assets
                                                          .images.iconUnselected
                                                          .image(
                                                        width: 16.w,
                                                        height: 16.h,
                                                      ),
                                                    ),
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  );
                                }),
                                SizedBox(
                                  height: 12.h,
                                ),
                              ],
                            );
                          },
                        );
                      }),
                    ),
                    Container(
                      width: 30,
                      child: ListView.builder(
                        // physics: NeverScrollableScrollPhysics(),
                        itemCount: controller.initials.length,
                        itemBuilder: (context, index) {
                          return GestureDetector(
                            onTap: () => controller
                                .scrollToInitial(controller.initials[index]),
                            child: Padding(
                              padding: EdgeInsets.symmetric(vertical: 2),
                              child: Text(
                                controller.initials[index],
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                  fontSize: 14,
                                  color: "#0279FB".color,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ),
                          );
                        },
                      ),
                    ),
                  ],
                ),
              ),
              Visibility(
                visible: controller.isEdit.value,
                child: GestureDetector(
                  onTap: () {
                    controller.deleteBtnClick();
                  },
                  child: Container(
                    width: 328.w,
                    height: 48.h,
                    decoration: BoxDecoration(
                      color: "#0279FB".color,
                      borderRadius: BorderRadius.all(
                        Radius.circular(10.r),
                      ),
                    ),
                    child: Center(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            "Delete",
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 16.sp,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              )
            ],
          );
        }),
      ),
    );
  }
}