import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:flutter_svg/svg.dart';
import 'package:fluttericon/entypo_icons.dart';
import 'package:fluttericon/modern_pictograms_icons.dart';
import 'package:form_builder_validators/form_builder_validators.dart';
import 'package:unit2/screens/unit2/roles/qr_code_scanner.dart/components/custom_switch.dart';
import 'package:unit2/test_data.dart';
import 'package:unit2/utils/text_container.dart';
import '../../../../theme-data.dart/btn-style.dart';
import '../../../../theme-data.dart/colors.dart';
import '../../../../theme-data.dart/form-style.dart';
import '../../../../utils/global.dart';

class QRCodeScannerSettings extends StatefulWidget {
  const QRCodeScannerSettings({super.key});

  @override
  State<QRCodeScannerSettings> createState() => _QRCodeScannerSettingsState();
}

class _QRCodeScannerSettingsState extends State<QRCodeScannerSettings> {
  bool _includeOtherInputs = false;
  String scanMode = 'INCOMING';
  String selectedLevel = '';
  String selectedEstablishment = '';
  String selectedArea = '';
  final _formKey = GlobalKey<FormBuilderState>();
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          appBar: AppBar(
            title: const Text(qrScannerTitle),
            centerTitle: true,
            backgroundColor: second,
          ),
          body: SingleChildScrollView(
            child: Container(
              height: screenHeight * .88,
              padding: const EdgeInsets.symmetric(horizontal: 30),
              child: FormBuilder(
                key: _formKey,
                child: Column(
                  children: [
                    const SizedBox(
                      height: 32,
                    ),
                    SvgPicture.asset(
                      'assets/svgs/switch.svg',
                      height: blockSizeVertical * 14,
                      allowDrawingOutsideViewBox: true,
                    ),
                    ListTile(
                      title: Text(
                        setQRScannerSettings,
                        style: Theme.of(context)
                            .textTheme
                            .headline6!
                            .copyWith(color: third),
                        textAlign: TextAlign.center,
                      ),
                    ),
                    Text(includeOtherInputs,
                        style: Theme.of(context).textTheme.subtitle1),
                    Text(
                      includeOtherInputsSubTitle,
                      style: Theme.of(context).textTheme.caption,
                    ),
                    SizedBox(
                      child: FittedBox(
                        child: CostumToggleSwitch(
                          activeBGColors: [
                            Colors.green[800]!,
                            Colors.red[800]!
                          ],
                          initialLabelIndex: _includeOtherInputs ? 0 : 1,
                          icons: const [Entypo.check, ModernPictograms.cancel],
                          labels: const ['YES', 'NO'],
                          onToggle: (value) {
                            value == 0
                                ? _includeOtherInputs = true
                                : _includeOtherInputs = false;
                          },
                        ),
                      ),
                    ),
                    // Incoming or outgoing
                    Text(incomingORoutgoing,
                        style: Theme.of(context).textTheme.subtitle1),
                    Text(
                      incomingORoutgoingSubTitle,
                      style: Theme.of(context).textTheme.caption,
                    ),
                    FittedBox(
                      child: CostumToggleSwitch(
                        activeBGColors: [Colors.green[800]!, Colors.red[800]!],
                        initialLabelIndex: scanMode == 'INCOMING' ? 0 : 1,
                        icons: const [
                          Entypo.down_bold,
                          Entypo.up_bold,
                        ],
                        labels: const ['INCOMING', 'OUTGOING'],
                        onToggle: (value) {
                          value == 0
                              ? scanMode = 'INCOMING'
                              : scanMode = 'OUTGOING';
                        },
                      ),
                    ),
                    const SizedBox(
                      height: 10,
                    ),

                    //SELECT LEVEL

                    FormBuilderDropdown<String?>(
                      name: 'level',
                      validator: FormBuilderValidators.required(
                          errorText: fieldIsRequired),
                      decoration: normalTextFieldStyle(selectLevel, "level"),
                      items: levels
                          .map((level) => DropdownMenuItem(
                                value: level,
                                child: Text(level),
                              ))
                          .toList(),
                      // value: selectedLevel,
                      onChanged: (value) async {
                        selectedLevel = value!;
                      },
                    ),

                    const SizedBox(
                      height: 8,
                    ),

                    FormBuilderDropdown<String?>(
                        name: 'establishment',
                        decoration: normalTextFieldStyle(
                            selectedEstablishment, "establishments"),
                        isExpanded: true,
                        validator: FormBuilderValidators.required(
                          errorText: fieldIsRequired),
                        items: establishments
                            .map((est) => DropdownMenuItem(
                                  value: est,
                                  child: Text(est),
                                ))
                            .toList(),
                        // value: selectedArea,
                        onChanged: (value) async {
                          selectedArea = value!;
                        }),
                    const SizedBox(
                      height: 8,
                    ),
                    DropdownButtonFormField<String?>(
                        decoration: normalTextFieldStyle(
                            selectEstablishment, "establishments"),
                        isExpanded: true,
                        items: establishments
                            .map((est) => DropdownMenuItem(
                                  value: est,
                                  child:  Text(est),
                                ))
                            .toList(),
                        // value: selectedArea,
                        onChanged: (value) async {
                          selectedArea = value!;
                        }),
                    const Expanded(
                      child: SizedBox(),
                    ),
                    SizedBox(
                      width: double.infinity,
                      height: screenHeight * .06,
                      child: ElevatedButton(
                        style: secondaryBtnStyle(
                            second, Colors.transparent, Colors.white54),
                        child: const Text(
                          submit,
                          style: TextStyle(color: Colors.white),
                        ),
                        onPressed: () {
                          // if (_formKey.currentState.validate()) {
                          //   _formKey.currentState.save();
                          //   BlocProvider.of<UserBloc>(context)
                          //       .add(UserWebLogin(
                          //           password: password,
                          //           username: username));
                          // }
                        },
                      ),
                    ),

                    const SizedBox(
                      height: 8,
                    ),
                  ],
                ),
              ),
            ),
          )),
    );
  }
}
