import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:multiselect/multiselect.dart';
import 'package:unit2/bloc/offline/offline_passo/building/structural_materials_offline.dart/structural_material_offline_bloc.dart';
import 'package:unit2/model/passo/structural_materials_ii.dart';
import 'package:unit2/screens/offline/passo/building/edit/edit_building.dart';

import '../../../../../model/passo/structureMaterial.dart';
import '../../../../../widgets/passo/custom_button.dart';
import '../../../../../widgets/passo/custom_formBuilder_fields.dart';

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

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

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

class _StructuralMaterialsPageEditOffline
    extends State<StructuralMaterialsPageEditOffline> {
  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<StructuralMaterialOfflineBloc,
        StructuralMaterialOfflineState>(listener: (context, state) {
      if (state is SpecificStructuralMaterialLoaded) {
        setState(() {
          foundation = state.materials.foundation?.split(', ') ?? [];
          column = state.materials.columns?.split(', ') ?? [];
          beam = state.materials.beams?.split(', ') ?? [];
          truss_framing = state.materials.trussFraming?.split(', ') ?? [];
          roof = state.materials.roof?.split(', ') ?? [];
          flooring = state.materials.flooring?.split(', ') ?? [];
          walls = state.materials.walls?.split(', ') ?? [];
          // Update other local state variables here if needed
        });
      }
      // TODO: implement listener
    }, builder: (context, state) {
      if (state is SpecificStructuralMaterialLoaded) {
        return SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: Padding(
            padding: const EdgeInsets.all(15.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              // Added this line
              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.center,
                  ),
                ),
                Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      const 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", TextInputType.text),
                    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:
                          state.materials.foundation ?? '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", TextInputType.text),
                    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: state.materials.columns ?? '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", TextInputType.text),
                    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: state.materials.beams ?? '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", TextInputType.text),
                    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: state.materials.trussFraming ??
                          '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", TextInputType.text),
                    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: state.materials.roof ?? '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", TextInputType.text),
                    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:
                          state.materials.flooring ?? '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", TextInputType.text),
                    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:
                          state.materials.walls ?? '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: 1,
                            bldgapprDetailsId: widget.tempId,
                            foundation: foundationOthers
                                ? offlineBldgEditKey
                                    .currentState!.value['other_foundation']
                                : foundation.isNotEmpty
                                    ? foundation
                                    : [state.materials.foundation!],
                            columns: columOthers
                                ? offlineBldgEditKey
                                    .currentState!.value['other_column']
                                : column.isNotEmpty
                                    ? column
                                    : [state.materials.columns!],
                            beams: beamsOthers
                                ? offlineBldgEditKey
                                    .currentState!.value['other_beam']
                                : beam.isNotEmpty
                                    ? beam
                                    : [state.materials.beams!],
                            trussFraming: tfOthers
                                ? offlineBldgEditKey
                                    .currentState!.value['other_tf']
                                : truss_framing.isNotEmpty
                                    ? truss_framing
                                    : [state.materials.trussFraming!],
                            roof: roofOthers
                                ? offlineBldgEditKey
                                    .currentState!.value['other_roof']
                                : roof.isNotEmpty
                                    ? roof
                                    : [state.materials.roof!],
                            flooring: flooringOthers
                                ? offlineBldgEditKey
                                    .currentState!.value['other_flooring']
                                : flooring.isNotEmpty
                                    ? flooring
                                    : [state.materials.flooring!],
                            walls: wpOthers
                                ? offlineBldgEditKey
                                    .currentState!.value['other_wp']
                                : walls.isNotEmpty
                                    ? walls
                                    : [state.materials.walls!],
                            others: ["Others"]);
                        print('struct mat');
                        print(strucMaterials.toJson());
                        context.read<StructuralMaterialOfflineBloc>().add(
                            UpdateStructuralMaterials(
                                id: widget.tempId, materials: strucMaterials));
                        widget.NextBtn();
                      },
                    ),
                  ],
                )
              ],
            ),
          ),
        );
      }
      // if (state is StructuralMaterialsErrorState) {
      //   return Text(state.error);
      // }
      return Container();
    });
  }
}
