import 'dart:convert';
import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:provider/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 'package:test_sa/service_request_latest/utilities/service_request_utils.dart';
import 'package:test_sa/service_request_latest/views/components/action_button/footer_action_button.dart';
import 'package:test_sa/views/widgets/images/multi_image_picker.dart';

import '../../controllers/providers/api/gas_refill_provider.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;
  final TextEditingController _commentController = TextEditingController();
  GasRefillProvider? _gasRefillProvider;

  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();
    _gasRefillProvider ??= Provider.of<GasRefillProvider>(context, listen: false);
    _gasModel =GasRefillModel();
    _currentDetails = GasRefillDetails();
    _gasModel = GasRefillModel(gasRefillDetails: []);
    _gasRefillProvider!.gasRefillAttachments.clear();
  }

  @override
  void dispose() {
    super.dispose();
    _gasRefillProvider!.gasRefillAttachments.clear();
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: DefaultAppBar(title: context.translation.newGasRefillRequest),
      body: Column(
        children: [
          12.height,
          SingleChildScrollView(
            child: Column(
              children: [
                SingleItemDropDownMenu<Lookup, GasTypesProvider>(
                  context: context,
                  title: context.translation.gasType,
                  initialValue: _currentDetails.gasType,
                  backgroundColor: AppColor.neutral100,
                  showShadow: false,
                  showAsBottomSheet: true,
                  onSelect: (value) {
                    _currentDetails.gasType = value;
                  },
                ),
                8.height,
                SingleItemDropDownMenu<Lookup, CylinderTypesProvider>(
                  context: context,
                  title: context.translation.cylinderType,
                  initialValue: _currentDetails.cylinderType,
                  backgroundColor: AppColor.neutral100,
                  showShadow: false,
                  onSelect: (value) {
                    _currentDetails.cylinderType = value;
                  },
                ),
                8.height,
                SingleItemDropDownMenu<Lookup, CylinderSizeProvider>(
                  context: context,
                  title: context.translation.cylinderSize,
                  initialValue: _currentDetails.cylinderSize,
                  showAsBottomSheet: true,
                  backgroundColor: AppColor.neutral100,
                  showShadow: false,
                  onSelect: (value) {
                    _currentDetails.cylinderSize = value;
                  },
                ),
                8.height,
                SingleItemDropDownMenu<Lookup, NullableLoadingProvider>(
                  context: context,
                  title: context.translation.quantity,
                  showAsBottomSheet: true,
                  initialValue: _requestedQuantity,
                  staticData: gasQuantity,
                  backgroundColor: AppColor.neutral100,
                  showShadow: false,
                  onSelect: (value) {
                    _requestedQuantity = value;
                    _currentDetails.requestedQty = value?.value;
                  },
                ),
                8.height,
                Row(
                  children: [
                    SingleItemDropDownMenu<Site, SiteProvider>(
                      context: context,
                      title: context.translation.site,
                      initialValue: _gasModel.site,
                      showAsBottomSheet: true,
                      backgroundColor: AppColor.neutral100,
                      showShadow: false,
                      onSelect: (value) {
                        setState(() {
                          _gasModel.site = value;
                          _gasModel.building = null;
                          _gasModel.floor = null;
                          _gasModel.department = null;
                        });
                      },
                    ).expanded,
                    8.width,
                    SingleItemDropDownMenu<Building, NullableLoadingProvider>(
                      context: context,
                      title: context.translation.building,
                      initialValue: _gasModel.building,
                      enabled: _gasModel.site?.buildings?.isNotEmpty ?? false,
                      staticData: _gasModel.site?.buildings ?? [],
                      showAsBottomSheet: true,
                      backgroundColor: AppColor.neutral100,
                      showShadow: false,
                      onSelect: (value) {
                        setState(() {
                          _gasModel.building = value;
                          _gasModel.floor = null;
                          _gasModel.department = null;
                        });
                      },
                    ).expanded,
                  ],
                ),
                8.height,
                Row(
                  children: [
                    SingleItemDropDownMenu<Floor, NullableLoadingProvider>(
                      context: context,
                      title: context.translation.floor,
                      initialValue: _gasModel.floor,
                      enabled: _gasModel.building?.floors?.isNotEmpty ?? false,
                      staticData: _gasModel.building?.floors ?? [],
                      showAsBottomSheet: true,
                      backgroundColor: AppColor.neutral100,
                      showShadow: false,
                      onSelect: (value) {
                        setState(() {
                          _gasModel.floor = value;
                          _gasModel.department = null;
                        });
                      },
                    ).expanded,
                    8.width,
                    SingleItemDropDownMenu<Department, NullableLoadingProvider>(
                      context: context,
                      title: context.translation.department,
                      initialValue: _gasModel.department,
                      enabled: _gasModel.floor?.departments?.isNotEmpty ?? false,
                      staticData: _gasModel.floor?.departments ?? [],
                      showAsBottomSheet: true,
                      backgroundColor: AppColor.neutral100,
                      showShadow: false,
                      onSelect: (value) {
                        _gasModel.department = value;
                      },
                    ).expanded,
                  ],
                ),
                8.height,
                AppTextFormField(
                  labelText: context.translation.callComments,
                  labelStyle: AppTextStyles.tinyFont.copyWith(color: AppColor.neutral120),
                  textInputType: TextInputType.multiline,
                  alignLabelWithHint: true,
                  backgroundColor: AppColor.neutral100,
                  showShadow: false,
                  controller: _commentController,
                  onChange: (value){
                    _gasModel.comment = value;
                  },
                  onSaved: (value) {},
                ),
                8.height,
                MultiFilesPicker(
                  label: context.translation.attachFiles,
                  files: _gasRefillProvider!.gasRefillAttachments,
                  buttonColor: AppColor.black10,
                  onlyImages: false,
                  buttonIcon: 'image-plus'.toSvgAsset(color: AppColor.neutral120),
                ),
              ],
            ).toShadowContainer(context, padding: 10).paddingOnly(start: 16, end: 16, top: 16),
          ).expanded,
          16.height,
          FooterActionButton.footerContainer(child: AppFilledButton(label: context.translation.submitRequest, maxWidth: true, onPressed: _submit)),
        ],
      ),
    );
  }

  Future<void> _submit() async {
    if (_currentDetails.gasType==null) {
      Fluttertoast.showToast(msg: context.translation.youHaveToAddRequests);
      return;
    }
    _gasModel.gasRefillDetails=[];
    _gasModel.gasRefillDetails?.add(_currentDetails);
    _gasModel.gasRefillAttachments = [];
    for (var item in _gasRefillProvider!.gasRefillAttachments) {
      _gasModel.gasRefillAttachments?.add(GasRefillAttachments(
          id: 0, gasRefillId: _gasModel.id ?? 0, attachmentName: ServiceRequestUtils.isLocalUrl(item.path) ? "${item.path.split("/").last}|${base64Encode(item.readAsBytesSync())}" : item.path));
    }
    await _gasRefillProvider?.addGasRefillRequest(
      context: context,
      model: _gasModel,
    );
  }

  void _add() async {
    if (_currentDetails.validate(context) && _gasModel.validate(context)) {
      _gasModel.gasRefillDetails!.add(_currentDetails);
      _currentDetails = GasRefillDetails();
      _requestedQuantity = null;
      setState(() {});
    }
  }

  void _delete(index) {
    _gasModel.gasRefillDetails!.remove(_gasModel.gasRefillDetails![index]);
    setState(() {});
  }
//older code....
// if (_gasModel.gasRefillDetails?.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.gasRefillDetails?.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.gasRefillDetails![index].gasType?.name ?? "").heading5(context),
//                 8.height,
//                 ("${context.translation.quantity}: ${_gasModel.gasRefillDetails![index].requestedQty}").bodyText(context),
//                 ("${context.translation.cylinderSize}: ${_gasModel.gasRefillDetails![index].cylinderSize?.name}").bodyText(context),
//                 ("${context.translation.cylinderType}: ${_gasModel.gasRefillDetails![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);
//   },
// ),
}