import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:multiselect/multiselect.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:unit2/bloc/offline/offline_passo/building/structural_materials_offline.dart/structural_material_offline_bloc.dart';
import 'package:unit2/bloc/passo/bulding/property_info/property_info_bloc.dart';
import 'package:unit2/model/passo/structural_materials_ii.dart';
import 'package:unit2/screens/offline/passo/building/add/add_building.dart';
import 'package:unit2/widgets/passo/custom_button.dart';
import 'package:unit2/widgets/passo/custom_formBuilder_fields.dart';

class MaterialOption {
  final String id;
  final String label;

  MaterialOption(this.id, this.label);
}

class StructuralMaterialsOfflinePage extends StatefulWidget {
  final VoidCallback PrevBtn;
  final VoidCallback NextBtn;

  final List<String> foundation;
  final List<String> column;
  final List<String> beam;
  final List<String> trussFraming;
  final List<String> roof;
  final List<String> flooring;
  final List<String> walls;

  final bool foundationOthers;
  final bool columOthers;
  final bool beamsOthers;
  final bool tfOthers;
  final bool roofOthers;
  final bool flooringOthers;
  final bool wpOthers;

  final Function(bool) updateFoundationOthers;
  final Function(bool) updateColumOthers;
  final Function(bool) updateBeamsOthers;
  final Function(bool) updateTfOthers;
  final Function(bool) updateRoofOthers;
  final Function(bool) updateFlooringOthers;
  final Function(bool) updateWpOthers;

  final Function(List<String>) updateFoundation;
  final Function(List<String>) updateColumn;
  final Function(List<String>) updateBeam;
  final Function(List<String>) updateTrussFraming;
  final Function(List<String>) updateRoof;
  final Function(List<String>) updateFlooring;
  final Function(List<String>) updateWalls;

  StructuralMaterialsOfflinePage(
    this.PrevBtn,
    this.NextBtn, {
    Key? key,
    required this.foundation,
    required this.column,
    required this.beam,
    required this.trussFraming,
    required this.roof,
    required this.flooring,
    required this.walls,
    required this.updateFoundation,
    required this.updateColumn,
    required this.updateBeam,
    required this.updateTrussFraming,
    required this.updateRoof,
    required this.updateFlooring,
    required this.updateWalls,
    required this.updateFoundationOthers,
    required this.updateColumOthers,
    required this.updateBeamsOthers,
    required this.updateTfOthers,
    required this.updateRoofOthers,
    required this.updateFlooringOthers,
    required this.updateWpOthers,
    required this.foundationOthers,
    required this.columOthers,
    required this.beamsOthers,
    required this.tfOthers,
    required this.roofOthers,
    required this.flooringOthers,
    required this.wpOthers,
    // Repeat for other update methods...
  });

  @override
  _StructuralMaterialsOfflinePage createState() =>
      _StructuralMaterialsOfflinePage();
}

class _StructuralMaterialsOfflinePage
    extends State<StructuralMaterialsOfflinePage> {
  // List<String> foundation = [];
  // List<String> column = [];
  // List<String> beam = [];
  // List<String> trussFraming = [];
  // List<String> roof = [];
  // List<String> flooring = [];
  // List<String> walls = [];

  List<MaterialOption> columnOptions = [
    MaterialOption('steel', 'Steel'),
    MaterialOption('concrete', 'Reinforced Concrete'),
    MaterialOption('wood', 'Wood'),
  ];

  List<String> selectedColumnValues = [];

  FocusNode _focusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return StatefulBuilder(builder: (context, structuralState) {
      return SingleChildScrollView(
        padding: const EdgeInsets.all(30.0),
        child: Column(
          children: [
            Container(
              margin:
                  const EdgeInsets.only(left: 0, top: 20, right: 0, bottom: 10),
              child: const Text('STRUCTURAL MATERIALS',
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
                  textAlign: TextAlign.left),
            ),
            Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
              Text(
                'FOUNDATION',
                textAlign: TextAlign.start,
              ),
              Row(
                children: [
                  const Text('Others'),
                  Checkbox(
                    checkColor: Colors.white,
                    value: widget.foundationOthers,
                    onChanged: (bool? value) {
                      structuralState(() {
                        widget.updateFoundationOthers(value!);
                      });
                    },
                  )
                ],
              ),
            ]),
            Padding(
              padding: const EdgeInsets.only(top: 10.0, bottom: 10.0),
              child: Visibility(
                visible: widget.foundationOthers,
                child: customTextField("Enter other foundation", "",
                    "other_foundation", TextInputType.text),
                replacement: DropDownMultiSelect(
                  selected_values_style: TextStyle(color: Colors.black),
                  onChanged: (List<String> x) {
                    widget.updateFoundation(x);
                  },
                  options: const ['Reinforced Concrete', 'Plain Concrete'],
                  selectedValues: widget.foundation,
                  whenEmpty: 'Select Foundations',
                ),
              ),
            ),
            Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
              Text(
                'COLUMNS',
                textAlign: TextAlign.start,
              ),
              Row(
                children: [
                  const Text('Others'),
                  Checkbox(
                    checkColor: Colors.white,
                    value: widget.columOthers,
                    onChanged: (bool? value) {
                      structuralState(() {
                        widget.updateColumOthers(value!);
                      });
                    },
                  )
                ],
              ),
            ]),
            Padding(
              padding: const EdgeInsets.only(top: 10.0, bottom: 10.0),
              child: Visibility(
                visible: widget.columOthers,
                child: customTextField("Enter other columns", "",
                    "other_column", TextInputType.text),
                replacement: DropDownMultiSelect(
                  selected_values_style: TextStyle(color: Colors.black),
                  onChanged: (List<String> x) {
                    widget.updateColumn(x);
                  },
                  options: const ['Steel', 'Reinforced Concrete', 'Wood'],
                  selectedValues: widget.column,
                  whenEmpty: 'Select Column/s',
                ),
              ),
            ),
            Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
              Text(
                'BEAMS',
                textAlign: TextAlign.start,
              ),
              Row(
                children: [
                  const Text('Others'),
                  Checkbox(
                    checkColor: Colors.white,
                    value: widget.beamsOthers,
                    onChanged: (bool? value) {
                      structuralState(() {
                        widget.updateBeamsOthers(value!);
                      });
                    },
                  )
                ],
              ),
            ]),
            Padding(
              padding: const EdgeInsets.only(top: 10.0, bottom: 10.0),
              child: Visibility(
                visible: widget.beamsOthers,
                child: customTextField(
                    "Enter other beam/s", "", "other_beam", TextInputType.text),
                replacement: DropDownMultiSelect(
                  selected_values_style: TextStyle(color: Colors.black),
                  onChanged: (List<String> x) {
                    widget.updateBeam(x);
                  },
                  options: const ['Steel', 'Reinforced Concrete', 'Wood'],
                  selectedValues: widget.beam,
                  whenEmpty: 'Select Beam/s',
                ),
              ),
            ),
            Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
              Text(
                'TRUSS FRAMING',
                textAlign: TextAlign.start,
              ),
              Row(
                children: [
                  const Text('Others'),
                  Checkbox(
                    checkColor: Colors.white,
                    value: widget.tfOthers,
                    onChanged: (bool? value) {
                      structuralState(() {
                        widget.updateTfOthers(value!);
                      });
                    },
                  )
                ],
              ),
            ]),
            Padding(
              padding: const EdgeInsets.only(top: 10.0, bottom: 10.0),
              child: Visibility(
                visible: widget.tfOthers,
                child: customTextField("Enter other truss framing/s", "",
                    "other_tf", TextInputType.text),
                replacement: DropDownMultiSelect(
                  selected_values_style: TextStyle(color: Colors.black),
                  onChanged: (List<String> x) {
                    widget.updateTrussFraming(x);
                  },
                  options: const ['Steel', 'Wood'],
                  selectedValues: widget.trussFraming,
                  whenEmpty: 'Select Truss Framing/s',
                ),
              ),
            ),
            Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
              const Text(
                'ROOF',
                textAlign: TextAlign.start,
              ),
              Row(
                children: [
                  const Text('Others'),
                  Checkbox(
                    checkColor: Colors.white,
                    value: widget.roofOthers,
                    onChanged: (bool? value) {
                      structuralState(() {
                        widget.updateRoofOthers(value!);
                      });
                    },
                  )
                ],
              ),
            ]),
            Padding(
              padding: const EdgeInsets.only(top: 10.0, bottom: 10.0),
              child: Visibility(
                visible: widget.roofOthers,
                child: customTextField(
                    "Enter other roof/s", "", "other_roof", TextInputType.text),
                replacement: DropDownMultiSelect(
                  selected_values_style: TextStyle(color: Colors.black),
                  onChanged: (List<String> x) {
                    widget.updateRoof(x);
                  },
                  options: const [
                    'Reinforced Concrete',
                    'Tiles',
                    'G.I Sheet',
                    'Aluminum',
                    'Asbestos',
                    'Long Span',
                    'Concrete Desk',
                    'Nipa/Anahaw/Cogon'
                  ],
                  selectedValues: widget.roof,
                  whenEmpty: 'Select Roof/s',
                ),
              ),
            ),
            Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
              Text(
                'FLOORING',
                textAlign: TextAlign.start,
              ),
              Row(
                children: [
                  const Text('Others'),
                  Checkbox(
                    checkColor: Colors.white,
                    value: widget.flooringOthers,
                    onChanged: (bool? value) {
                      structuralState(() {
                        widget.updateFlooringOthers(value!);
                      });
                    },
                  )
                ],
              ),
            ]),
            Padding(
              padding: const EdgeInsets.only(top: 10.0, bottom: 10.0),
              child: Visibility(
                visible: widget.flooringOthers,
                child: customTextField("Enter other flooring/s", "",
                    "other_flooring", TextInputType.text),
                replacement: DropDownMultiSelect(
                  selected_values_style: TextStyle(color: Colors.black),
                  onChanged: (List<String> x) {
                    widget.updateFlooring(x);
                  },
                  options: const [
                    'Reinforced Concrete',
                    'Plain Cement',
                    'Marble',
                    'Wood',
                    'Tiles'
                  ],
                  selectedValues: widget.flooring,
                  whenEmpty: 'Select Flooring/s',
                ),
              ),
            ),
            Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
              Text(
                'WALLS & PARTITIONS',
                textAlign: TextAlign.start,
              ),
              Row(
                children: [
                  const Text('Others'),
                  Checkbox(
                    checkColor: Colors.white,
                    value: widget.wpOthers,
                    onChanged: (bool? value) {
                      structuralState(() {
                        widget.updateWpOthers(value!);
                      });
                    },
                  )
                ],
              ),
            ]),
            Padding(
              padding: const EdgeInsets.only(top: 10.0, bottom: 10.0),
              child: Visibility(
                visible: widget.wpOthers,
                child: customTextField("Enter other walls & partition/s", "",
                    "other_wp", TextInputType.text),
                replacement: DropDownMultiSelect(
                  selected_values_style: TextStyle(color: Colors.black),
                  onChanged: (List<String> x) {
                    widget.updateWalls(x);
                  },
                  options: const [
                    'Reinforced Concrete',
                    'Plain Concrete',
                    'Wood',
                    'CHIB',
                    'G.I Sheet',
                    'Build-a-wall',
                    'Sawali',
                    'Bamboo'
                  ],
                  selectedValues: widget.walls,
                  whenEmpty: 'Select Walls & Partition/s',
                ),
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                CustomButton(
                  icon: const Icon(Icons.chevron_left_rounded,
                      color: Colors.white),
                  onPressed: () {
                    {
                      widget.PrevBtn();
                    }
                    ;
                  },
                ),
                CustomButton(
                  icon: const Icon(Icons.chevron_right_rounded,
                      color: Colors.white),
                  onPressed: () async {
                    {
                      final tempID = await SharedPreferences.getInstance();

                      context.read<StructuralMaterialOfflineBloc>().add(
                          AddStructuralMaterial(
                              id: 1,
                              bldgapprDetailsId: tempID.getInt('tempid')!,
                              assessedById: '',
                              assessedByName: '',
                              dateCreated: '',
                              dateModified: '',
                              foundation: widget.foundationOthers
                                  ? [
                                      offlineBldgKey.currentState!
                                          .value['other_foundation']
                                    ]
                                  : widget.foundation,
                              columns: widget
                                      .columOthers
                                  ? [
                                      offlineBldgKey
                                          .currentState!.value['other_column']
                                    ]
                                  : widget.column,
                              beams:
                                  widget
                                          .beamsOthers
                                      ? [
                                          offlineBldgKey
                                              .currentState!.value['other_beam']
                                        ]
                                      : widget.beam,
                              trussFraming: widget.tfOthers
                                  ? [
                                      offlineBldgKey
                                          .currentState!.value['other_tf']
                                    ]
                                  : widget.trussFraming,
                              roof:
                                  widget.roofOthers
                                      ? [
                                          offlineBldgKey
                                              .currentState!.value['other_roof']
                                        ]
                                      : widget.roof,
                              flooring:
                                  widget.flooringOthers
                                      ? [
                                          offlineBldgKey.currentState!
                                              .value['other_flooring']
                                        ]
                                      : widget.flooring,
                              walls: widget.wpOthers
                                  ? [
                                      offlineBldgKey
                                          .currentState!.value['other_wp']
                                    ]
                                  : widget.walls,
                              others: const ["Others"],
                              genCode: '5th'));
                      widget.NextBtn();
                    }
                    ;
                  },
                )
              ],
            )
          ],
        ),
      );
    });
  }
}
