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

import 'package:flutter/material.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 {
  final List<FamilyBackground> familyBackground;
  const FamilyBackgroundScreen({super.key, required this.familyBackground});

  @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) {
    father = widget.familyBackground
        .firstWhere((element) => element.relationship!.id == 1);
    mother = widget.familyBackground
        .firstWhere((element) => element.relationship!.id == 2);
    spouse = widget.familyBackground
        .firstWhere((element) => element.relationship!.id == 3);

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

    //get all related persons
    var relateds = widget.familyBackground
        .where((element) => element.relationship!.id! > 4);
    if (relateds.isNotEmpty) {
      for (var element in relateds) {
        otherRelated.add(element);
      }
    }
    return Scaffold(
      appBar: AppBar(
        title: const Text(familyBackgroundScreenTitle),
        centerTitle: true,
        backgroundColor: primary,
      ),
      body: 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("   $fullname",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,
        ),

        //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("    $fullname",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("    $fullname",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("    $fullname",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("    $fullname",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(),
      ]),
    );
  }
}