import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:provider/provider.dart';
import 'package:test_sa/controllers/providers/api/gas_refill_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/string_extensions.dart';
import 'package:test_sa/extensions/widget_extensions.dart';
import 'package:test_sa/views/app_style/sizing.dart';
import 'package:test_sa/views/pages/user/gas_refill/request_gas_refill.dart';
import 'package:test_sa/views/widgets/loaders/app_loading.dart';
import 'package:test_sa/views/widgets/loaders/no_item_found.dart';
import 'package:test_sa/views/widgets/requests/request_status.dart';

import '../../../../extensions/text_extensions.dart';
import '../../../../models/enums/user_types.dart';
import '../../../../models/new_models/gas_refill_model.dart';
import '../../../../new_views/app_style/app_color.dart';
import '../../../../new_views/common_widgets/default_app_bar.dart';
import '../../../app_style/colors.dart';

class GasRefillDetailsPage extends StatefulWidget {
  GasRefillModel model;

  GasRefillDetailsPage({Key key, this.model}) : super(key: key);

  @override
  State<GasRefillDetailsPage> createState() => _GasRefillDetailsPageState();
}

class _GasRefillDetailsPageState extends State<GasRefillDetailsPage> {
  GasRefillModel _model = GasRefillModel(gazRefillDetails: []);
  UserProvider _userProvider;
  bool _isLoading = false;

  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  void initState() {
    // _model.fromGasRefillModel(gasRefillModel);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    _userProvider = Provider.of<UserProvider>(context);
    GasRefillProvider _gasRefillProvider = Provider.of<GasRefillProvider>(context);

    return Scaffold(
      appBar: DefaultAppBar(title: context.translation.gasRefillDetails),
      key: _scaffoldKey,
      body: SafeArea(
        child: FutureBuilder(
          future: _gasRefillProvider.getGasRefillObjectById(widget.model.id),
          builder: (context, snap) {
            if (snap.connectionState == ConnectionState.waiting) {
              return const ALoading();
            } else if (snap.hasData) {
              _model = snap.data;
              return Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SingleChildScrollView(
                    padding: const EdgeInsets.all(16),
                    child: informationCard(_model),
                  ).expanded,
                ],
              );
            }
            return NoItemFound(message: context.translation.noDataFound);
          },
        ),
      ),
    );
  }

  Widget informationCard(GasRefillModel gasRefillModel) {
    return Column(
      children: [
        Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    /// TBD
                    //StatusLabel(
                    //label: item.priority.name,
                    //id: serviceRequest.priority.id,
                    //textColor: AColors.getPriorityStatusTextColor(serviceRequest.priority.id),
                    //backgroundColor: AColors.getPriorityStatusColor(serviceRequest.priority.id)
                    //),
                    // 8.width,
                    StatusLabel(
                        label: gasRefillModel.status?.name ?? "",
                        textColor: AColors.getRequestStatusTextColor(gasRefillModel.status?.value ?? 0),
                        backgroundColor: AColors.getRequestStatusColor(gasRefillModel.status?.value ?? 0)),
                    8.height,
                    context.translation.gasRefillRequest.heading5(context),
                    8.height,

                    ///TBD
                    context.translation.gasRequest.bodyText(context),
                    '${context.translation.cylinderSize}: ${gasRefillModel.gazRefillDetails[0].cylinderSize.value}'.bodyText(context),
                    '${context.translation.site}: ${gasRefillModel.site.name}'.bodyText(context),
                  ],
                ),
                1.width.expanded,
                Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    if (_userProvider.user.type == UsersTypes.engineer && (gasRefillModel.status?.value ?? 0) != 2)
                      CircleAvatar(
                        radius: 25,
                        backgroundColor: AppColor.neutral30,
                        child: CircleAvatar(
                          radius: 24,
                          backgroundColor: Colors.white,
                          child: Padding(
                            padding: const EdgeInsets.only(left: 3.0),
                            child: SvgPicture.asset('assets/images/update.svg'),
                          ),
                        ),
                      ).onPress(
                        () async {
                          _model?.fromGasRefillModel(gasRefillModel);
                          // setState(() {});
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder: (context) => RequestGasRefill(
                                gasRefillModel: gasRefillModel,
                              ),
                            ),
                          ).then((value) {
                            if (value != null) {
                              _model = value;
                            }
                          });
                          setState(() {});
                        },
                      ),
                    Text(gasRefillModel.startDate?.toServiceRequestCardFormat ?? "", textAlign: TextAlign.end, style: AppTextStyles.tinyFont.copyWith(color: const Color(0xFF3B3D4A))),
                  ],
                )
              ],
            ),
            8.height,
            const Divider(color: Color(0xFFEAF1F4), height: 1, thickness: 1),
            8.height,
            '${context.translation.requestedQuantity}: ${gasRefillModel.gazRefillDetails[0].requestedQty}'.bodyText(context),
            '${context.translation.deliveredQuantity}: ${gasRefillModel.gazRefillDetails[0].deliverdQty}'.bodyText(context),
            8.height,
          ],
        ).paddingAll(16),

        /// TBD
        (_userProvider.user.type == UsersTypes.normal_user
                ? Container(
                    height: 50,
                    padding: const EdgeInsets.only(left: 16, right: 16),
                    alignment: Alignment.center,
                    width: double.infinity,
                    decoration: const ShapeDecoration(
                      color: Color(0xFFEAF1F4),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(20),
                          bottomRight: Radius.circular(20),
                        ),
                      ),
                    ),
                    child: Row(
                      children: [
                        Text(
                          '${context.translation.commentHere}...',
                          style: AppTextStyles.heading6.copyWith(
                            color: AppColor.neutral50.withOpacity(.6),
                          ),
                        ).expanded,
                        SvgPicture.asset("assets/images/comment_send.svg", width: 24 * AppStyle.getScaleFactor(context), height: 20 * AppStyle.getScaleFactor(context), color: AppColor.primary70),
                      ],
                    ),
                  )
                : Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const Divider(color: Color(0xFFEAF1F4), height: 1, thickness: 1),
                      16.height,
                      Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Text(
                            '${context.translation.viewComments}',
                            style: AppTextStyles.bodyText.copyWith(color: const Color(0xFF4A8DB7)),
                          ),
                          4.width,
                          const Icon(
                            Icons.arrow_forward,
                            color: Color(0xFF4A8DB7),
                            size: 14,
                          )
                        ],
                      ),
                    ],
                  ).paddingOnly(bottom: 16, start: 16, end: 16))
            .onPress(() {}),
      ],
    ).toShadowContainer(context, padding: 0);
  }
}