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/passo/bulding/property_info/property_info_bloc.dart';
import 'package:unit2/model/passo/structural_materials_ii.dart';
import 'package:unit2/screens/passo/Building/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 StructuralMaterialsPage extends StatefulWidget {
  final VoidCallback NextBtn;
  final VoidCallback PrevBtn;

  StructuralMaterialsPage(this.NextBtn, this.PrevBtn);

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

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

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

  List<String> selectedColumnValues = [];

  @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: foundationOthers,
                    onChanged: (bool? value) {
                      structuralState(() {
                        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) {
                    structuralState(() {
                      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) {
                      structuralState(() {
                        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) {
                    structuralState(() {
                      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) {
                      structuralState(() {
                        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) {
                    structuralState(() {
                      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) {
                      structuralState(() {
                        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) {
                    structuralState(() {
                      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) {
                      structuralState(() {
                        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) {
                    structuralState(() {
                      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) {
                      structuralState(() {
                        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) {
                    structuralState(() {
                      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) {
                      structuralState(() {
                        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: () async {
                    {
                      try {
                        final tempID = await SharedPreferences.getInstance();
                        var strucMaterials = StructureMaterialsII(
                            id: tempID.getInt('tempid')! - 1,
                            foundation: foundationOthers
                                ? formKey
                                    .currentState!.value['other_foundation']
                                    .split(',')
                                : foundation,
                            columns: columOthers
                                ? formKey.currentState!.value['other_column']
                                    .split(',')
                                : column,
                            beams: beamsOthers
                                ? formKey.currentState!.value['other_beam']
                                    .split(',')
                                : beam,
                            trussFraming: tfOthers
                                ? formKey.currentState!.value['other_tf']
                                    .split(',')
                                : truss_framing,
                            roof: roofOthers
                                ? formKey.currentState!.value['other_roof']
                                    .split(',')
                                : roof,
                            flooring: flooringOthers
                                ? formKey.currentState!.value['other_flooring']
                                    .split(',')
                                : flooring,
                            walls: wpOthers
                                ? formKey.currentState!.value['other_wp']
                                    .split(',')
                                : walls,
                            others: ["Others"]);
                        context.read<PropertyInfoBloc>()
                          ..add(UpdateStrucMaterials(data: strucMaterials));
                      } catch (e) {
                        Fluttertoast.showToast(
                            msg: "Slow internet connection, please try again!");
                      }
                    }
                    ;
                  },
                )
              ],
            )
          ],
        ),
      );
    });
  }
}
