passo_mobile_app/lib/screens/profile/components/family_background_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_progress_hud/flutter_progress_hud.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:unit2/bloc/family/family_bloc.dart';
import 'package:unit2/bloc/profile/profile_bloc.dart';
import 'package:unit2/bloc/user/user_bloc.dart';
import 'package:unit2/model/profile/family_backround.dart';
import 'package:unit2/theme-data.dart/box_shadow.dart';
import 'package:unit2/theme-data.dart/colors.dart';
import 'package:unit2/utils/global.dart';
import 'package:unit2/utils/text_container.dart';

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

  @override
  State<FamilyBackgroundScreen> createState() => _FamilyBackgroundScreenState();
}

class _FamilyBackgroundScreenState extends State<FamilyBackgroundScreen> {
  FamilyBackground? father;
  FamilyBackground? mother;
  FamilyBackground? spouse;
  List<FamilyBackground> children = [];
  List<FamilyBackground> otherRelated = [];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(familyBackgroundScreenTitle),
        centerTitle: true,
        backgroundColor: primary,
      ),
      body: ProgressHUD(
          padding: const EdgeInsets.all(24),
          backgroundColor: Colors.black87,
          indicatorWidget: const SpinKitFadingCircle(color: Colors.white),
        child: BlocBuilder<UserBloc, UserState>(
          builder: (context, state) {
            return BlocBuilder<ProfileBloc, ProfileState>(
              builder: (context, state) {
                if (state is ProfileLoaded) {
                  return BlocConsumer<FamilyBloc, FamilyState>(
                    listener: (context, state) {
                      if (state is FamilyLoadingState) {
                        final progress = ProgressHUD.of(context);
                        progress!.showWithText("Please wait...");
                      }
                      if (state is FamilyLoaded || state is FamilyErrorState) {
                        final progress = ProgressHUD.of(context);
                        progress!.dismiss();
                      }
                    },
                    builder: (context, state) {
                      if (state is FamilyLoaded) {
                        father = state.families.firstWhere(
                            (element) => element.relationship!.id == 1);
                        mother = state.families.firstWhere(
                            (element) => element.relationship!.id == 2);
                        spouse = state.families.firstWhere(
                            (element) => element.relationship!.id == 3);

                        //  get all children
                        var childs = state.families
                            .where((element) => element.relationship!.id == 4);
                        if (childs.isNotEmpty) {
                          for (var element in childs) {
                            children.add(element);
                          }
                        }

                        //get all related persons
                        var relateds = state.families
                            .where((element) => element.relationship!.id! > 4);
                        if (relateds.isNotEmpty) {
                          for (var element in relateds) {
                            otherRelated.add(element);
                          }
                        }
                        return ListView(children: [
                          //Father----------------------------------------------
                          Container(
                            decoration: box1(),
                            padding: const EdgeInsets.symmetric(
                                horizontal: 12, vertical: 8),
                            width: screenWidth,
                            child: Row(
                              children: [
                                Expanded(
                                  child: Column(
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        const Text(fatherText),
                                        const SizedBox(
                                          height: 5,
                                        ),
                                        Text(
                                          "  ${father!.relatedPerson!.firstName} ${father!.relatedPerson!.middleName} ${father!.relatedPerson!.lastName} ${father!.relatedPerson!.nameExtension ?? ''},",
                                          style: Theme.of(context)
                                              .textTheme
                                              .titleMedium!
                                              .copyWith(
                                                  fontWeight: FontWeight.w500),
                                        ),
                                        Text(
                                          "   ",
                                          style: Theme.of(context)
                                              .textTheme
                                              .bodySmall,
                                        ),
                                        Row(
                                          children: [
                                            Checkbox(
                                                value: false,
                                                onChanged: (value) {
                                                  setState(() {
                                                    value = !value!;
                                                  });
                                                }),
                                            const Text(incaseOfEmergency)
                                          ],
                                        )
                                      ]),
                                ),
                                IconButton(
                                    onPressed: () {},
                                    icon: const Icon(
                                      Icons.more_vert,
                                      color: Colors.grey,
                                    ))
                              ],
                            ),
                          ),
                          const SizedBox(
                            height: 5,
                          ),

                          //Mother-----------------------------------------------------
                          Container(
                            decoration: box1(),
                            padding: const EdgeInsets.symmetric(
                                horizontal: 12, vertical: 8),
                            width: screenWidth,
                            child: Row(
                              children: [
                                Expanded(
                                  child: Column(
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        const Text(motherText),
                                        const SizedBox(
                                          height: 5,
                                        ),
                                        Text(
                                          "   ${mother!.relatedPerson!.firstName} ${mother!.relatedPerson!.middleName} ${mother!.relatedPerson!.lastName} ${mother!.relatedPerson!.nameExtension ?? ''}",
                                          style: Theme.of(context)
                                              .textTheme
                                              .titleMedium!
                                              .copyWith(
                                                  fontWeight: FontWeight.w500),
                                        ),
                                        Text("    ",
                                            style: Theme.of(context)
                                                .textTheme
                                                .bodySmall),
                                        Row(
                                          children: [
                                            Checkbox(
                                                value: false,
                                                onChanged: (value) {}),
                                            const Text(incaseOfEmergency)
                                          ],
                                        )
                                      ]),
                                ),
                                IconButton(
                                    onPressed: () {},
                                    icon: const Icon(
                                      Icons.more_vert,
                                      color: Colors.grey,
                                    ))
                              ],
                            ),
                          ),
                          const SizedBox(
                            height: 5,
                          ),
                          //Spouse ---------------------------------------------------------
                          spouse != null
                              ? Container(
                                  decoration: box1(),
                                  padding: const EdgeInsets.symmetric(
                                      horizontal: 12, vertical: 8),
                                  width: screenWidth,
                                  child: Row(
                                    children: [
                                      Expanded(
                                        child: Column(
                                            mainAxisAlignment:
                                                MainAxisAlignment.start,
                                            crossAxisAlignment:
                                                CrossAxisAlignment.start,
                                            children: [
                                              const Text(spouseText),
                                              const SizedBox(
                                                height: 5,
                                              ),
                                              Text(
                                                  "   ${spouse!.relatedPerson!.firstName} ${spouse!.relatedPerson!.middleName} ${spouse!.relatedPerson!.lastName} ${spouse!.relatedPerson!.nameExtension ?? ''}",
                                                  style: Theme.of(context)
                                                      .textTheme
                                                      .titleMedium!
                                                      .copyWith(
                                                          fontWeight:
                                                              FontWeight.w500)),
                                              Text("    ",
                                                  style: Theme.of(context)
                                                      .textTheme
                                                      .bodySmall),
                                              Row(
                                                children: [
                                                  Checkbox(
                                                      value: false,
                                                      onChanged: (value) {}),
                                                  const Text(incaseOfEmergency)
                                                ],
                                              )
                                            ]),
                                      ),
                                      IconButton(
                                          onPressed: () {},
                                          icon: const Icon(
                                            Icons.more_vert,
                                            color: Colors.grey,
                                          ))
                                    ],
                                  ),
                                )
                              : const SizedBox(),
                          const SizedBox(
                            height: 5,
                          ),

                          // Childrens ----------------------------------
                          children.isNotEmpty
                              ? Container(
                                  decoration: box1(),
                                  child: Column(
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: children.map((child) {
                                        int index = children.indexOf(child);
                                        return Container(
                                          padding: const EdgeInsets.symmetric(
                                              horizontal: 12, vertical: 8),
                                          width: screenWidth,
                                          child: Column(
                                            mainAxisAlignment:
                                                MainAxisAlignment.start,
                                            crossAxisAlignment:
                                                CrossAxisAlignment.start,
                                            children: [
                                              index == 0
                                                  ? const Text(childrenText)
                                                  : const SizedBox(),
                                              const SizedBox(
                                                height: 5,
                                              ),
                                              Row(
                                                children: [
                                                  Expanded(
                                                    child: Column(
                                                        mainAxisAlignment:
                                                            MainAxisAlignment
                                                                .start,
                                                        crossAxisAlignment:
                                                            CrossAxisAlignment
                                                                .start,
                                                        children: [
                                                          Text(
                                                              "   ${child.relatedPerson!.firstName} ${child.relatedPerson!.middleName} ${child.relatedPerson!.lastName} ${child.relatedPerson!.nameExtension ?? ''}",
                                                              style: Theme.of(
                                                                      context)
                                                                  .textTheme
                                                                  .titleMedium!
                                                                  .copyWith(
                                                                      fontWeight:
                                                                          FontWeight
                                                                              .w500)),
                                                          Text("    ",
                                                              style: Theme.of(
                                                                      context)
                                                                  .textTheme
                                                                  .bodySmall),
                                                          Row(
                                                            children: [
                                                              Checkbox(
                                                                  value: false,
                                                                  onChanged:
                                                                      (value) {}),
                                                              const Text(
                                                                  incaseOfEmergency)
                                                            ],
                                                          )
                                                        ]),
                                                  ),
                                                  IconButton(
                                                      onPressed: () {},
                                                      icon: const Icon(
                                                        Icons.more_vert,
                                                        color: Colors.grey,
                                                      ))
                                                ],
                                              ),
                                            ],
                                          ),
                                        );
                                      }).toList()),
                                )
                              : const SizedBox(),
                          const SizedBox(
                            height: 5,
                          ),
                          //Other related person
                          otherRelated.isNotEmpty
                              ? Container(
                                  decoration: box1(),
                                  child: Column(
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: otherRelated.map((relative) {
                                        int index2 =
                                            otherRelated.indexOf(relative);
                                        return Container(
                                          padding: const EdgeInsets.symmetric(
                                              horizontal: 12, vertical: 8),
                                          width: screenWidth,
                                          child: Column(
                                            mainAxisAlignment:
                                                MainAxisAlignment.start,
                                            crossAxisAlignment:
                                                CrossAxisAlignment.start,
                                            children: [
                                              index2 == 0
                                                  ? const Text(otherRelatedText)
                                                  : const SizedBox(),
                                              const SizedBox(
                                                height: 5,
                                              ),
                                              Row(
                                                children: [
                                                  Expanded(
                                                    child: Column(
                                                        mainAxisAlignment:
                                                            MainAxisAlignment
                                                                .start,
                                                        crossAxisAlignment:
                                                            CrossAxisAlignment
                                                                .start,
                                                        children: [
                                                          Text(
                                                              "   ${relative.relatedPerson!.firstName} ${relative.relatedPerson!.middleName} ${relative.relatedPerson!.lastName} ${relative.relatedPerson!.nameExtension ?? ''}",
                                                              style: Theme.of(
                                                                      context)
                                                                  .textTheme
                                                                  .titleMedium!
                                                                  .copyWith(
                                                                      fontWeight:
                                                                          FontWeight
                                                                              .w500)),
                                                          Text("    ",
                                                              style: Theme.of(
                                                                      context)
                                                                  .textTheme
                                                                  .bodySmall!),
                                                          Row(
                                                            children: [
                                                              Checkbox(
                                                                  value: false,
                                                                  onChanged:
                                                                      (value) {}),
                                                              const Text(
                                                                  incaseOfEmergency)
                                                            ],
                                                          )
                                                        ]),
                                                  ),
                                                  IconButton(
                                                      onPressed: () {},
                                                      icon: const Icon(
                                                        Icons.more_vert,
                                                        color: Colors.grey,
                                                      ))
                                                ],
                                              ),
                                            ],
                                          ),
                                        );
                                      }).toList()),
                                )
                              : const SizedBox(),
                        ]);
                      }
                      return Container();
                    },
                  );
                }
                return Container();
              },
            );
          },
        ),
      ),
    );
  }
}