import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter/src/widgets/placeholder.dart';
import 'package:unit2/model/profile/family_backround.dart';
import 'package:unit2/theme-data.dart/colors.dart';
import 'package:unit2/utils/global.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);
     var childs =  widget.familyBackground.where((element) => element.relationship!.id==4);
     if(childs.isNotEmpty){
      for (var element in childs) {
        children.add(element);
      }
     }
     var relateds =  widget.familyBackground.where((element) => element.relationship!.id! < 4);
      if(relateds.isNotEmpty){
      for (var element in childs) {
        otherRelated.add(element);
      }
     }
    return Scaffold(
      appBar: AppBar(title: const Text("Addresses"), centerTitle: true, backgroundColor: primary,),
      body: Column(
        children: [
       //Father
          Container(
               decoration: BoxDecoration(
                      color: Colors.grey[200],
                      borderRadius: const BorderRadius.all(Radius.circular(12))),
              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("Father"),
                    Text("${father!.relatedPerson!.firstName} ${father!.relatedPerson!.middleName} ${father!.relatedPerson!.lastName} ${father!.relatedPerson!.nameExtension??''}"),
                      const Text("Full Name"),
                      Row(children: [
                        Checkbox(value: false, onChanged: (value){}),
                        const Text("Incase of emergency")
                      ],)
                          ]),
                ),
            IconButton(onPressed: (){}, icon: const Icon(Icons.more_vert))
              ],
            ),),
            const SizedBox(height: 5,),
            //Mother
             Container(
               decoration: BoxDecoration(
                      color: Colors.grey[200],
                      borderRadius: const BorderRadius.all(Radius.circular(12))),
              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("Mother"),
                    Text("${mother!.relatedPerson!.firstName} ${mother!.relatedPerson!.middleName} ${mother!.relatedPerson!.lastName} ${mother!.relatedPerson!.nameExtension??''}"),
                      const Text("Full Name"),
                      Row(children: [
                        Checkbox(value: false, onChanged: (value){}),
                        const Text("Incase of emergency")
                      ],)
                          ]),
                ),
            IconButton(onPressed: (){}, icon: const Icon(Icons.more_vert))
              ],
            ),),
            const SizedBox(height: 5,),
            //Spouse
            spouse != null?
                Container(
               decoration: BoxDecoration(
                      color: Colors.grey[200],
                      borderRadius: const BorderRadius.all(Radius.circular(12))),
              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("Spouse"),
                    Text("${spouse!.relatedPerson!.firstName} ${spouse!.relatedPerson!.middleName} ${spouse!.relatedPerson!.lastName} ${spouse!.relatedPerson!.nameExtension??''}"),
                      const Text("Full Name"),
                      Row(children: [
                        Checkbox(value: false, onChanged: (value){}),
                        const Text("Incase of emergency")
                      ],)
                          ]),
                ),
            IconButton(onPressed: (){}, icon: const Icon(Icons.more_vert))
              ],
            ),):const SizedBox(),
  const SizedBox(height: 5,),

// Childrens
            children.isNotEmpty?Expanded(
              child: ListView(
                children: children.map((child) =>     Container(
                 decoration: BoxDecoration(
                        color: Colors.grey[200],
                        borderRadius: const BorderRadius.all(Radius.circular(12))),
                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("Children"),
                      Text("${child.relatedPerson!.firstName} ${child.relatedPerson!.middleName} ${child.relatedPerson!.lastName} ${child.relatedPerson!.nameExtension??''}"),
                        const Text("Full Name"),
                        Row(children: [
                          Checkbox(value: false, onChanged: (value){}),
                          const Text("Incase of emergency")
                        ],)
                            ]),
                  ),
              IconButton(onPressed: (){}, icon: const Icon(Icons.more_vert))
                ],
              ),),).toList()),
            ):const SizedBox(),

                otherRelated.isNotEmpty?Expanded(
              child: ListView(
                children: otherRelated.map((relative) =>     Container(
                 decoration: BoxDecoration(
                        color: Colors.grey[200],
                        borderRadius: const BorderRadius.all(Radius.circular(12))),
                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("Other related Person(s)"),
                      Text("${relative.relatedPerson!.firstName} ${relative!.relatedPerson!.middleName} ${relative!.relatedPerson!.lastName} ${relative!.relatedPerson!.nameExtension??''}"),
                        const Text("Full Name"),
                        Row(children: [
                          Checkbox(value: false, onChanged: (value){}),
                          const Text("Incase of emergency")
                        ],)
                            ]),
                  ),
              IconButton(onPressed: (){}, icon: const Icon(Icons.more_vert))
                ],
              ),),).toList()),
            ):const SizedBox()
      ]),
    );
  }
}