import 'package:flutter/material.dart';
import 'package:mohem_flutter_app/api/mowadhafhi/mowadhafhi_api_client.dart';
import 'package:mohem_flutter_app/classes/colors.dart';
import 'package:mohem_flutter_app/classes/utils.dart';
import 'package:mohem_flutter_app/extensions/int_extensions.dart';
import 'package:mohem_flutter_app/extensions/string_extensions.dart';
import 'package:mohem_flutter_app/models/mowadhafhi/get_ticket_details.dart';
import 'package:mohem_flutter_app/models/mowadhafhi/get_ticket_transactions.dart';
import 'package:mohem_flutter_app/widgets/app_bar_widget.dart';

class MowadhafhiRequestDetails extends StatefulWidget {
  const MowadhafhiRequestDetails({Key? key}) : super(key: key);

  @override
  _RequestDetailsState createState() => _RequestDetailsState();
}

class _RequestDetailsState extends State<MowadhafhiRequestDetails> {
  String? itgTicketID;
  List<GetTicketDetailsByEmployee> getTicketsByEmployeeList = [];
  List<GetTicketTransactions> getTicketTransactionsList = [];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  getRequestID() {
    if (itgTicketID == null) {
      itgTicketID = ModalRoute.of(context)?.settings.arguments as String;
      debugPrint(itgTicketID);
      getTicketDetails();
    }
  }

  @override
  Widget build(BuildContext context) {
    getRequestID();
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBarWidget(
        context,
        title: "Mowadhafhi Request",
      ),
      body: SingleChildScrollView(
        child: getTicketsByEmployeeList.length != 0
            ? Column(
                children: [
                  Container(
                    width: double.infinity,
                    padding: const EdgeInsets.only(left: 12, right: 12, top: 12, bottom: 12),
                    margin: const EdgeInsets.only(left: 12, right: 12, top: 12, bottom: 12),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10),
                      boxShadow: [
                        BoxShadow(
                          color: const Color(0xff000000).withOpacity(.05),
                          blurRadius: 26,
                          offset: const Offset(0, -3),
                        ),
                      ],
                    ),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            getTicketsByEmployeeList![0].ticketStatusName!.toText14(color: MyColors.gradiantEndColor),
                            getTicketsByEmployeeList![0].created!.split(" ")[0].toText12(color: MyColors.grey70Color),
                          ],
                        ),
                        8.height,
                        "Ticket Reference: ".toText12(color: MyColors.grey98Color),
                        getTicketsByEmployeeList![0].ticketReferenceNo!.toText14(color: MyColors.grey57Color),
                        8.height,
                        "Section: ".toText12(color: MyColors.grey98Color),
                        getTicketsByEmployeeList![0].sectionName!.toText14(color: MyColors.grey57Color),
                        8.height,
                        "Topic: ".toText12(color: MyColors.grey98Color),
                        getTicketsByEmployeeList![0].topicName!.toText14(color: MyColors.grey57Color),
                        8.height,
                        "Description: ".toText12(color: MyColors.grey98Color),
                        getTicketsByEmployeeList![0].description!.toText14(color: MyColors.grey57Color),
                      ],
                    ),
                  ),
                  Container(
                    width: double.infinity,
                    padding: const EdgeInsets.only(left: 12, right: 12, top: 12, bottom: 12),
                    margin: const EdgeInsets.only(left: 12, right: 12, top: 12, bottom: 12),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10),
                      boxShadow: [
                        BoxShadow(
                          color: const Color(0xff000000).withOpacity(.05),
                          blurRadius: 26,
                          offset: const Offset(0, -3),
                        ),
                      ],
                    ),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        ListView.builder(
                          shrinkWrap: true,
                          physics: const ScrollPhysics(),
                          itemBuilder: (BuildContext context, int index) {
                            return Stack(
                              children: <Widget>[
                                Padding(
                                  padding: const EdgeInsets.only(left: 50.0),
                                  child: Card(
                                    elevation: 0.0,
                                    margin: const EdgeInsets.fromLTRB(0.0, 20.0, 20.0, 10.0),
                                    child: Container(
                                      padding: const EdgeInsets.all(12.0),
                                      width: double.infinity,
                                      child: Column(
                                        crossAxisAlignment: CrossAxisAlignment.start,
                                        children: [
                                          Row(
                                            children: [
                                              "Action By: ".toText14(color: MyColors.grey57Color),
                                              getTicketTransactionsList![index].actionBy!.toText14(color: MyColors.grey57Color),
                                            ],
                                          ),
                                          getTicketTransactionsList![index].comments!.toText14(color: MyColors.grey98Color),
                                          12.height,
                                          Row(
                                            mainAxisAlignment: MainAxisAlignment.end,
                                            children: [
                                              getTicketTransactionsList![0].actionDate!.split(" ")[0].toText12(color: MyColors.grey70Color),
                                            ],
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                ),
                                Positioned(
                                  top: 0.0,
                                  bottom: 0.0,
                                  left: 28.0,
                                  child: Container(
                                    height: double.infinity,
                                    width: 3.0,
                                    color: MyColors.lightTextColor.withOpacity(0.5),
                                  ),
                                ),
                                Positioned(
                                  top: 0.0,
                                  left: 15.0,
                                  child: Container(
                                    height: 30.0,
                                    width: 30.0,
                                    decoration: const BoxDecoration(
                                      shape: BoxShape.circle,
                                      color: Colors.white,
                                    ),
                                    child: Container(
                                      margin: const EdgeInsets.all(5.0),
                                      height: 30.0,
                                      width: 30.0,
                                      decoration: const BoxDecoration(shape: BoxShape.circle, color: MyColors.gradiantEndColor),
                                    ),
                                  ),
                                )
                              ],
                            );
                          },
                          itemCount: getTicketTransactionsList.length ?? 0,
                        )
                      ],
                    ),
                  ),
                ],
              )
            : Container(),
      ),
    );
  }

  void getTicketDetails() async {
    try {
      Utils.showLoading(context);
      getTicketsByEmployeeList = await MowadhafhiApiClient().getTicketDetailsByEmployee(itgTicketID);
      Utils.hideLoading(context);
      setState(() {});
      getTicketTransactions();
    } catch (ex) {
      Utils.hideLoading(context);
      Utils.handleException(ex, context, null);
    }
  }

  void getTicketTransactions() async {
    try {
      Utils.showLoading(context);
      getTicketTransactionsList = await MowadhafhiApiClient().getTicketTransactions(itgTicketID);
      debugPrint(getTicketTransactionsList![0].actionDate);
      Utils.hideLoading(context);
      setState(() {});
    } catch (ex) {
      Utils.hideLoading(context);
      Utils.handleException(ex, context, null);
    }
  }
}