import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:multiselect/multiselect.dart';
import 'package:unit2/bloc/passo/bulding/property_info/property_info_bloc.dart';
import 'package:unit2/bloc/passo/bulding/structural_material/structural_material_bloc.dart';
import 'package:unit2/model/passo/structural_materials_ii.dart';
import 'package:unit2/widgets/passo/custom_button.dart';
import 'package:unit2/widgets/passo/custom_formBuilder_fields.dart';

class StructuralMaterialsPageEdit extends StatefulWidget {
  // final VoidCallback onPutStructuralMaterials;
  final int tempId;
  final VoidCallback NextBtn;
  final VoidCallback PrevBtn;

  StructuralMaterialsPageEdit(this.tempId, this.NextBtn, this.PrevBtn);

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

class _StructuralMaterialsPageEdit extends State<StructuralMaterialsPageEdit> {
  bool foundationOthers = false;
  bool columOthers = false;
  bool beamsOthers = false;
  bool tfOthers = false;
  bool roofOthers = false;
  bool flooringOthers = false;
  bool wpOthers = false;
  List<String> foundation = [];
  List<String> column = [];
  List<String> beam = [];
  List<String> truss_framing = [];
  List<String> roof = [];
  List<String> flooring = [];
  List<String> walls = [];

  List<String> selectedColumnValues = [];

  @override
  Widget build(BuildContext context) {
    return BlocConsumer<StructuralMaterialBloc, StructuralMaterialState>(
        listener: (context, state) {
      if (state is StructuralMaterialsLoaded) {
        setState(() {
          foundation = state.structure.foundation!.split(',') ?? [];
          column = state.structure.columns!.split(',') ?? [];
          beam = state.structure.beams!.split(',') ?? [];
          truss_framing = state.structure.trussFraming!.split(',') ?? [];
          roof = state.structure.roof!.split(',') ?? [];
          flooring = state.structure.flooring!.split(',') ?? [];
          walls = state.structure.walls!.split(',') ?? [];
          // Update other local state variables here if needed
        });
      }
      // TODO: implement listener
    }, builder: (context, state) {
      if (state is StructuralMaterialsLoaded) {
        return SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: Column(
            children: [
              Expanded(
                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: foundationOthers,
                                onChanged: (bool? value) {
                                  setState(() {
                                    foundationOthers = value!;
                                  });
                                },
                              )
                            ],
                          ),
                        ]),
                    Padding(
                      padding: const EdgeInsets.only(top: 10.0, bottom: 10.0),
                      child: Visibility(
                        visible: foundationOthers,
                        child: customTextField(
                            "Enter other foundation", "", "other_foundation"),
                        replacement: DropDownMultiSelect(
                          selected_values_style: TextStyle(color: Colors.black),
                          onChanged: (List<String> x) {
                            setState(() {
                              foundation = x;
                            });
                          },
                          options: const [
                            'Reinforced Concrete',
                            'Plain Concrete'
                          ],
                          selectedValues: foundation,
                          whenEmpty: 'Select Foundations',
                        ),
                      ),
                    ),
                    Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            'COLUMNS',
                            textAlign: TextAlign.start,
                          ),
                          Row(
                            children: [
                              const Text('Others'),
                              Checkbox(
                                checkColor: Colors.white,
                                value: columOthers,
                                onChanged: (bool? value) {
                                  setState(() {
                                    columOthers = value!;
                                  });
                                },
                              )
                            ],
                          ),
                        ]),
                    Padding(
                      padding: const EdgeInsets.only(top: 10.0, bottom: 10.0),
                      child: Visibility(
                        visible: columOthers,
                        child: customTextField(
                            "Enter other columns", "", "other_column"),
                        replacement: DropDownMultiSelect(
                          selected_values_style: TextStyle(color: Colors.black),
                          onChanged: (List<String> x) {
                            setState(() {
                              column = x;
                            });
                          },
                          options: const [
                            'Steel',
                            'Reinforced Concrete',
                            'Wood'
                          ],
                          selectedValues: 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: beamsOthers,
                                onChanged: (bool? value) {
                                  setState(() {
                                    beamsOthers = value!;
                                  });
                                },
                              )
                            ],
                          ),
                        ]),
                    Padding(
                      padding: const EdgeInsets.only(top: 10.0, bottom: 10.0),
                      child: Visibility(
                        visible: beamsOthers,
                        child: customTextField(
                            "Enter other beam/s", "", "other_beam"),
                        replacement: DropDownMultiSelect(
                          selected_values_style: TextStyle(color: Colors.black),
                          onChanged: (List<String> x) {
                            setState(() {
                              beam = x;
                            });
                          },
                          options: const [
                            'Steel',
                            'Reinforced Concrete',
                            'Wood'
                          ],
                          selectedValues: 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: tfOthers,
                                onChanged: (bool? value) {
                                  setState(() {
                                    tfOthers = value!;
                                  });
                                },
                              )
                            ],
                          ),
                        ]),
                    Padding(
                      padding: const EdgeInsets.only(top: 10.0, bottom: 10.0),
                      child: Visibility(
                        visible: tfOthers,
                        child: customTextField(
                            "Enter other truss framing/s", "", "other_tf"),
                        replacement: DropDownMultiSelect(
                          selected_values_style: TextStyle(color: Colors.black),
                          onChanged: (List<String> x) {
                            setState(() {
                              truss_framing = x;
                            });
                          },
                          options: const ['Steel', 'Wood'],
                          selectedValues: truss_framing,
                          whenEmpty: 'Select Truss Framing/s',
                        ),
                      ),
                    ),
                    Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            'ROOF',
                            textAlign: TextAlign.start,
                          ),
                          Row(
                            children: [
                              const Text('Others'),
                              Checkbox(
                                checkColor: Colors.white,
                                value: roofOthers,
                                onChanged: (bool? value) {
                                  setState(() {
                                    roofOthers = value!;
                                  });
                                },
                              )
                            ],
                          ),
                        ]),
                    Padding(
                      padding: const EdgeInsets.only(top: 10.0, bottom: 10.0),
                      child: Visibility(
                        visible: roofOthers,
                        child: customTextField(
                            "Enter other roof/s", "", "other_roof"),
                        replacement: DropDownMultiSelect(
                          selected_values_style: TextStyle(color: Colors.black),
                          onChanged: (List<String> x) {
                            setState(() {
                              roof = x;
                            });
                          },
                          options: const [
                            'Reinforced Concrete',
                            'Tiles',
                            'G.I Sheet',
                            'Aluminum',
                            'Asbestos',
                            'Long Span',
                            'Concrete Desk',
                            'Nipa/Anahaw/Cogon'
                          ],
                          selectedValues: 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: flooringOthers,
                                onChanged: (bool? value) {
                                  setState(() {
                                    flooringOthers = value!;
                                  });
                                },
                              )
                            ],
                          ),
                        ]),
                    Padding(
                      padding: const EdgeInsets.only(top: 10.0, bottom: 10.0),
                      child: Visibility(
                        visible: flooringOthers,
                        child: customTextField(
                            "Enter other flooring/s", "", "other_flooring"),
                        replacement: DropDownMultiSelect(
                          selected_values_style: TextStyle(color: Colors.black),
                          onChanged: (List<String> x) {
                            setState(() {
                              flooring = x;
                            });
                          },
                          options: const [
                            'Reinforced Concrete',
                            'Plain Cement',
                            'Marble',
                            'Wood',
                            'Tiles'
                          ],
                          selectedValues: 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: wpOthers,
                                onChanged: (bool? value) {
                                  setState(() {
                                    wpOthers = value!;
                                  });
                                },
                              )
                            ],
                          ),
                        ]),
                    Padding(
                      padding: const EdgeInsets.only(top: 10.0, bottom: 10.0),
                      child: Visibility(
                        visible: wpOthers,
                        child: customTextField(
                            "Enter other walls & partition/s", "", "other_wp"),
                        replacement: DropDownMultiSelect(
                          selected_values_style: TextStyle(color: Colors.black),
                          onChanged: (List<String> x) {
                            setState(() {
                              walls = x;
                            });
                          },
                          options: const [
                            'Reinforced Concrete',
                            'Plain Concrete',
                            'Wood',
                            'CHIB',
                            'G.I Sheet',
                            'Build-a-wall',
                            'Sawali',
                            'Bamboo'
                          ],
                          selectedValues: 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: () {
                            {
                              var strucMaterials = StructureMaterialsII(
                                  id: widget.tempId,
                                  foundation: foundation,
                                  columns: column,
                                  beams: beam,
                                  trussFraming: truss_framing,
                                  roof: roof,
                                  flooring: flooring,
                                  walls: walls,
                                  others: ["Others"]);
                              context.read<PropertyInfoBloc>()
                                ..add(
                                    UpdateStrucMaterials(data: strucMaterials));

                              widget.NextBtn();
                            }
                            ;
                          },
                        )
                      ],
                    )
                  ],
                ),
              ),
            ],
          ),
        );
      }
      if (state is StructuralMaterialsErrorState) {
        return Text(state.error);
      }
      return Container();
    });
  }
}
