import 'package:flutter/material.dart';
import 'package:syncrow_app/features/devices/view/widgets/smart_door/add_member_view.dart';
import 'package:syncrow_app/features/shared_widgets/default_scaffold.dart';
import 'package:syncrow_app/features/shared_widgets/default_container.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_medium.dart';
import 'package:syncrow_app/features/shared_widgets/text_widgets/body_small.dart';
import 'package:syncrow_app/utils/context_extension.dart';
import 'package:syncrow_app/utils/helpers/custom_page_route.dart';
import 'package:syncrow_app/utils/helpers/misc_string_helpers.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';
import 'package:syncrow_app/utils/resource_manager/constants.dart';

class MembersManagementView extends StatefulWidget {
  const MembersManagementView({super.key});

  @override
  State<MembersManagementView> createState() => _MembersManagementViewState();
}

class _MembersManagementViewState extends State<MembersManagementView> {
  bool showFamilyMembers = true;
  @override
  Widget build(BuildContext context) {
    return DefaultScaffold(
      title: 'Manage Members',
      actions: [
        Padding(
          padding: const EdgeInsets.only(right: 10),
          child: IconButton(
            onPressed: () {
              Navigator.of(context).push(
                CustomPageRoute(
                  builder: (context) => const AddMemberView(),
                ),
              );
            },
            icon: const Icon(
              Icons.add,
              size: 30,
            ),
          ),
        ),
      ],
      child: SingleChildScrollView(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                InkWell(
                  onTap: () {
                    setState(() {
                      showFamilyMembers = true;
                    });
                  },
                  child: BodyMedium(
                    text: 'Family Members',
                    fontWeight:
                        showFamilyMembers ? FontWeight.bold : FontWeight.normal,
                  ),
                ),
                const SizedBox(width: 10),
                InkWell(
                  onTap: () {
                    setState(() {
                      showFamilyMembers = false;
                    });
                  },
                  child: BodyMedium(
                    text: 'Other Members',
                    fontWeight: !showFamilyMembers
                        ? FontWeight.bold
                        : FontWeight.normal,
                  ),
                ),
              ],
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 20),
              child: BodySmall(
                text:
                    'Administrators can set passwords for themselves or other users. Family members can set passwords only when they are granted the permission to set passwords.',
                style: context.bodySmall.copyWith(fontSize: 8),
              ),
            ),
            DefaultContainer(
              padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: List.generate(
                  members.length,
                  (index) {
                    if (showFamilyMembers) {
                      if (members[index]['role'] == MemberRole.FamilyMember) {
                        return Column(
                          children: [
                            Row(
                              children: [
                                const SizedBox.square(
                                  dimension: 35,
                                  child: CircleAvatar(
                                    backgroundColor: Colors.grey,
                                  ),
                                ),
                                const SizedBox(
                                  width: 10,
                                ),
                                BodyMedium(
                                    text: StringHelpers.toTitleCase(
                                        members[index]['name'] as String)),
                                const Spacer(),
                                const BodyMedium(
                                  text: 'Family Member',
                                  fontColor: Colors.grey,
                                )
                              ],
                            ),
                            index != members.length - 1
                                ? Container(
                                    margin: const EdgeInsets.only(
                                        left: 45, top: 8, bottom: 8),
                                    height: 1,
                                    color: ColorsManager.greyColor,
                                  )
                                : const SizedBox(),
                          ],
                        );
                      } else {
                        return const SizedBox();
                      }
                    } else {
                      if (members[index]['role'] == MemberRole.OtherMember) {
                        return Column(
                          children: [
                            Row(
                              children: [
                                const SizedBox.square(
                                  dimension: 35,
                                  child: CircleAvatar(
                                    backgroundColor: Colors.grey,
                                  ),
                                ),
                                const SizedBox(
                                  width: 10,
                                ),
                                BodyMedium(
                                    text: StringHelpers.toTitleCase(
                                        members[index]['name'] as String)),
                                const Spacer(),
                                const BodyMedium(
                                  text: 'Other Member',
                                  fontColor: Colors.grey,
                                )
                              ],
                            ),
                            index != members.length - 1
                                ? Container(
                                    margin: const EdgeInsets.only(
                                        left: 45, top: 8, bottom: 8),
                                    height: 1,
                                    color: ColorsManager.greyColor,
                                  )
                                : const SizedBox(),
                          ],
                        );
                      } else {
                        return const SizedBox();
                      }
                    }
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
