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/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/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> {
  late GasRefillDetails _currentDetails;
  late GasRefillModel _gasModel;
  Lookup? _requestedQuantity;

  static List<Lookup> gasQuantity = [
    Lookup(name: "1", id: 1, value: 1),
    Lookup(name: "2", id: 2, value: 2),
    Lookup(name: "3", id: 3, value: 3),
    Lookup(name: "4", id: 4, value: 4),
    Lookup(name: "5", id: 5, value: 5)
  ];

  @override
  void initState() {
    super.initState();
    _currentDetails = GasRefillDetails();
    _gasModel = GasRefillModel(gazRefillDetails: []);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: DefaultAppBar(title: context.translation.newGasRefillRequest),
      body: Column(
        children: [
          SingleChildScrollView(
            child: Column(
              children: [
                16.height,
                SingleItemDropDownMenu<Lookup, GasTypesProvider>(
                  context: context,
                  title: context.translation.gasType,
                  initialValue: _currentDetails.gasType,
                  showAsBottomSheet: true,
                  onSelect: (value) {
                    _currentDetails.gasType = value;
                  },
                ),
                8.height,
                SingleItemDropDownMenu<Lookup, NullableLoadingProvider>(
                  context: context,
                  title: context.translation.quantity,
                  initialValue: _requestedQuantity,
                  staticData: gasQuantity,
                  onSelect: (value) {
                    _requestedQuantity = value;
                    _currentDetails.requestedQty = value?.value;
                  },
                ),
                8.height,
                SingleItemDropDownMenu<Lookup, CylinderTypesProvider>(
                  context: context,
                  title: context.translation.cylinderType,
                  initialValue: _currentDetails.cylinderType,
                  onSelect: (value) {
                    _currentDetails.cylinderType = value;
                  },
                ),
                8.height,
                SingleItemDropDownMenu<Lookup, CylinderSizeProvider>(
                  context: context,
                  title: context.translation.cylinderSize,
                  initialValue: _currentDetails.cylinderSize,
                  showAsBottomSheet: true,
                  onSelect: (value) {
                    _currentDetails.cylinderSize = value;
                  },
                ),
                8.height,
                SingleItemDropDownMenu<Site, SiteProvider>(
                  context: context,
                  title: context.translation.site,
                  initialValue: _gasModel.site,
                  showAsBottomSheet: true,
                  onSelect: (value) {
                    setState(() {
                      _gasModel.site = value;
                      _gasModel.building = null;
                      _gasModel.floor = null;
                      _gasModel.department = null;
                    });
                  },
                ),
                8.height,
                SingleItemDropDownMenu<Building, NullableLoadingProvider>(
                  context: context,
                  title: context.translation.building,
                  initialValue: _gasModel.building,
                  enabled: _gasModel.site?.buildings?.isNotEmpty ?? false,
                  staticData: _gasModel.site?.buildings ?? [],
                  showAsBottomSheet: true,
                  onSelect: (value) {
                    setState(() {
                      _gasModel.building = value;
                      _gasModel.floor = null;
                      _gasModel.department = null;
                    });
                  },
                ),
                8.height,
                SingleItemDropDownMenu<Floor, NullableLoadingProvider>(
                  context: context,
                  title: context.translation.floor,
                  initialValue: _gasModel.floor,
                  enabled: _gasModel.building?.floors?.isNotEmpty ?? false,
                  staticData: _gasModel.building?.floors ?? [],
                  showAsBottomSheet: true,
                  onSelect: (value) {
                    setState(() {
                      _gasModel.floor = value;
                      _gasModel.department = null;
                    });
                  },
                ),
                8.height,
                SingleItemDropDownMenu<Department, NullableLoadingProvider>(
                  context: context,
                  title: context.translation.department,
                  initialValue: _gasModel.department,
                  enabled: _gasModel.floor?.departments?.isNotEmpty ?? false,
                  staticData: _gasModel.floor?.departments ?? [],
                  showAsBottomSheet: true,
                  onSelect: (value) {
                    _gasModel.department = value;
                  },
                ),
                8.height,
                if (_gasModel.gazRefillDetails?.isEmpty ?? true)
                  AppFilledButton(
                    label: context.translation.add,
                    maxWidth: true,
                    textColor: Colors.white,
                    buttonColor: context.isDark ? AppColor.neutral60 : AppColor.neutral50,
                    onPressed: _add,
                  ),
                ListView.builder(
                  shrinkWrap: true,
                  itemCount: _gasModel.gazRefillDetails?.length,
                  padding: const EdgeInsets.only(top: 12, bottom: 24),
                  physics: const NeverScrollableScrollPhysics(),
                  itemBuilder: (context, index) {
                    return 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),
                      ],
                    ).toShadowContainer(context);
                  },
                ),
              ],
            ),
          ).expanded,
          16.height,
          AppFilledButton(label: context.translation.submitRequest, maxWidth: true, onPressed: _submit),
        ],
      ).paddingOnly(start: 16, end: 16, bottom: 24),
    );
  }

  void _add() async {
    if (_currentDetails.validate(context) && _gasModel.validate(context)) {
      _gasModel.gazRefillDetails!.add(_currentDetails);
      _currentDetails = GasRefillDetails();
      _requestedQuantity = null;
      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;
    }
    await Provider.of<GasRefillProvider>(context, listen: false).createModel(
      context: context,
      user: Provider.of<UserProvider>(context, listen: false).user!,
      model: _gasModel,
    );
  }
}
