import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:provider/provider.dart';
import 'package:test_sa/controllers/providers/api/user_provider.dart';
import 'package:test_sa/extensions/context_extension.dart';
import 'package:test_sa/extensions/int_extensions.dart';
import 'package:test_sa/extensions/text_extensions.dart';
import 'package:test_sa/extensions/widget_extensions.dart';
import 'package:test_sa/models/enums/translation_keys.dart';
import 'package:test_sa/models/lookup.dart';
import 'package:test_sa/models/new_models/building.dart';
import 'package:test_sa/models/new_models/department.dart';
import 'package:test_sa/models/new_models/floor.dart';
import 'package:test_sa/models/new_models/gas_refill_model.dart';
import 'package:test_sa/models/new_models/site.dart';
import 'package:test_sa/new_views/app_style/app_color.dart';
import 'package:test_sa/new_views/common_widgets/app_filled_button.dart';
import 'package:test_sa/new_views/common_widgets/app_text_form_field.dart';
import 'package:test_sa/new_views/common_widgets/single_item_drop_down_menu.dart';
import 'package:test_sa/providers/gas_request_providers/cylinder_size_provider.dart';
import 'package:test_sa/providers/gas_request_providers/cylinder_type_provider.dart';
import 'package:test_sa/providers/gas_request_providers/gas_types_provider.dart';
import 'package:test_sa/providers/gas_request_providers/site_provider.dart';
import 'package:test_sa/providers/loading_list_notifier.dart';

import '../../controllers/providers/api/gas_refill_provider.dart';
import '../../controllers/validator/validator.dart';
import '../common_widgets/app_lazy_loading.dart';
import '../common_widgets/default_app_bar.dart';

class NewGasRefillRequestPage extends StatefulWidget {
  static const String routeName = "/new_gas_refill_request_page";

  const NewGasRefillRequestPage({Key key}) : super(key: key);

  @override
  State<NewGasRefillRequestPage> createState() => _NewGasRefillRequestPageState();
}

class _NewGasRefillRequestPageState extends State<NewGasRefillRequestPage> {
  GasRefillDetails _currentDetails;
  GasRefillModel _gasModel;
  GlobalKey<FormState> _formKey;
  TextEditingController _quantityController;

  @override
  void initState() {
    super.initState();
    _formKey = GlobalKey<FormState>();
    _currentDetails = GasRefillDetails();
    _gasModel = GasRefillModel(gazRefillDetails: []);
    _quantityController = TextEditingController();
  }

  @override
  void dispose() {
    _quantityController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: DefaultAppBar(title: context.translation.newGasRefillRequest),
      body: Column(
        children: [
          SingleChildScrollView(
            child: Form(
              key: _formKey,
              child: Column(
                children: [
                  16.height,
                  SingleItemDropDownMenu<Lookup, GasTypesProvider>(
                    context: context,
                    title: context.translation.gasType,
                    onSelect: (value) {
                      _currentDetails.gasType = value;
                    },
                  ),
                  8.height,
                  AppTextFormField(
                    controller: _quantityController,
                    labelText: context.translation.quantity,
                    textInputType: TextInputType.number,
                    validator: (value) => Validator.hasValue(value)
                        ? Validator.isNumeric(value)
                            ? null
                            : context.translation.onlyNumbers
                        : context.translation.requiredField,
                    onSaved: (text) {
                      _currentDetails.requestedQty = double.tryParse(text ?? "") ?? 0;
                    },
                  ),
                  8.height,
                  SingleItemDropDownMenu<Lookup, CylinderTypesProvider>(
                    context: context,
                    title: context.translation.cylinderType,
                    onSelect: (value) {
                      _currentDetails.cylinderType = value;
                    },
                  ),
                  8.height,
                  SingleItemDropDownMenu<Lookup, CylinderSizeProvider>(
                    context: context,
                    title: context.translation.cylinderSize,
                    onSelect: (value) {
                      _currentDetails.cylinderSize = value;
                    },
                  ),
                  8.height,
                  SingleItemDropDownMenu<Site, SiteProvider>(
                    context: context,
                    title: context.translation.destinationSite,
                    initialValue: _gasModel.site,
                    onSelect: (value) {
                      setState(() {
                        _gasModel.site = value;
                      });
                    },
                  ),
                  8.height,
                  SingleItemDropDownMenu<Building, NullableLoadingProvider>(
                    context: context,
                    title: context.translation.building,
                    initialValue: _gasModel.building,
                    enabled: _gasModel.site?.buildings?.isNotEmpty ?? false,
                    staticData: _gasModel.site?.buildings ?? [],
                    onSelect: (value) {
                      setState(() {
                        _gasModel.building = value;
                      });
                    },
                  ),
                  8.height,
                  SingleItemDropDownMenu<Floor, NullableLoadingProvider>(
                    context: context,
                    title: context.translation.floor,
                    initialValue: _gasModel.floor,
                    enabled: _gasModel.building?.floors?.isNotEmpty ?? false,
                    staticData: _gasModel.building?.floors ?? [],
                    onSelect: (value) {
                      setState(() {
                        _gasModel.floor = value;
                      });
                    },
                  ),
                  8.height,
                  SingleItemDropDownMenu<Department, NullableLoadingProvider>(
                    context: context,
                    title: context.translation.department,
                    initialValue: _gasModel.department,
                    enabled: _gasModel.floor?.departments?.isNotEmpty ?? false,
                    staticData: _gasModel.floor?.departments ?? [],
                    onSelect: (value) {
                      _gasModel.department = value;
                    },
                  ),
                  // 8.height,
                  // SingleItemDropDownMenu<Department, DepartmentProvider>(
                  //   context: context,
                  //   title: context.translation.department,
                  //   onSelect: (value) {
                  //     _formModel.department = value;
                  //   },
                  // ),
                  8.height,
                  AppFilledButton(
                    label: context.translation.add,
                    maxWidth: true,
                    textColor: Colors.white,
                    buttonColor: context.isDark ? AppColor.neutral60 : AppColor.neutral50,
                    onPressed: _add,
                  ),
                  24.height,
                  ListView.builder(
                    shrinkWrap: true,
                    itemCount: _gasModel.gazRefillDetails?.length,
                    physics: const NeverScrollableScrollPhysics(),
                    itemBuilder: (context, index) {
                      return Card(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    _gasModel.gazRefillDetails[index].gasType?.name?.heading5(context),
                                    8.height,
                                    ("${context.translation.quantity}: ${_gasModel.gazRefillDetails[index].requestedQty}").bodyText(context),
                                    ("${context.translation.cylinderSize}: ${_gasModel.gazRefillDetails[index].cylinderSize?.name}").bodyText(context),
                                    ("${context.translation.cylinderType}: ${_gasModel.gazRefillDetails[index].cylinderType?.name}").bodyText(context),
                                  ],
                                ),
                                Container(
                                  height: 48.toScreenWidth,
                                  width: 48.toScreenWidth,
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(100),
                                    border: Border.all(color: context.isDark ? AppColor.neutral50 : AppColor.neutral30),
                                  ),
                                  padding: EdgeInsets.symmetric(vertical: 12.toScreenHeight),
                                  child: "trash".toSvgAsset(fit: BoxFit.fitHeight, color: context.isDark ? AppColor.red40 : AppColor.red50),
                                ).onPress(() {
                                  _delete(index);
                                }),
                              ],
                            ),
                            const Divider().defaultStyle(context),
                            ("${context.translation.site}: ${_gasModel.site?.custName}").bodyText(context),
                            ("${context.translation.building}: ${_gasModel.building?.name}").bodyText(context),
                            ("${context.translation.floor}: ${_gasModel.floor?.name}").bodyText(context),
                            ("${context.translation.department}: ${_gasModel.department?.departmentName}").bodyText(context),
                          ],
                        ).paddingAll(16),
                      );
                    },
                  ),
                  40.height,
                ],
              ),
            ),
          ).expanded,
          AppFilledButton(label: context.translation.submitRequest, maxWidth: true, onPressed: _submit),
        ],
      ).paddingOnly(left: 16, right: 16, bottom: 24),
    );
  }

  void _add() async {
    if (_formKey.currentState.validate() && await _currentDetails.validate(context) && await _gasModel.validate(context)) {
      _formKey.currentState.save();
      _gasModel.gazRefillDetails.add(_currentDetails);
      _quantityController.clear();
      _currentDetails = GasRefillDetails();
      setState(() {});
    }
  }

  void _delete(index) {
    _gasModel.gazRefillDetails.remove(_gasModel.gazRefillDetails[index]);
    setState(() {});
  }

  Future<void> _submit() async {
    if (_gasModel.gazRefillDetails?.isEmpty ?? true) {
      Fluttertoast.showToast(msg: context.translation.youHaveToAddRequests);
      return;
    }
    showDialog(context: context, barrierDismissible: false, builder: (context) => const AppLazyLoading());
    final status = await Provider.of<GasRefillProvider>(context, listen: false).createModel(
      user: Provider.of<UserProvider>(context, listen: false).user,
      model: _gasModel,
    );
    Navigator.pop(context);
    if (status >= 200 && status < 300) {
      Fluttertoast.showToast(msg: context.translation.createdSuccessfully);
      Navigator.of(context).pop();
      setState(() {});
    } else {
      Fluttertoast.showToast(msg: context.translation.failedToCompleteRequest);
    }
  }
}