import 'package:flutter/material.dart';

import 'package:get/get.dart';
import 'package:IQ/app/modules/home/models/support_model.dart';
import 'package:IQ/app/routes/app_pages.dart';

import '../controllers/support_controller.dart';

import 'package:double_back_to_close_app/double_back_to_close_app.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:IQ/app/global/global_snackbar.dart';
import 'package:IQ/app/global/static_informs.dart';
import 'package:IQ/app/global/text_widget.dart';
import 'package:IQ/app/modules/drawerSide/views/drawer_side_view.dart';
import 'package:IQ/app/modules/home/providers/user.dart';

class SupportView extends GetView<SupportController> {
  SupportView({Key? key}) : super(key: key);
  final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    var stackedContainer = Container(
      height: 250,
      decoration: BoxDecoration(
        color: brandColor,
        image: const DecorationImage(
          image: AssetImage('assets/background.png'),
          fit: BoxFit.fill,
        ),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          SizedBox(height: MediaQuery.of(context).viewPadding.top),
          Container(
            margin: const EdgeInsets.symmetric(
              horizontal: 15,
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  margin: const EdgeInsets.only(
                    top: 5,
                    right: 15,
                  ),
                  child: Row(
                    children: [
                      SvgPicture.asset(
                        "assets/2/icon.svg",
                        height: 20,
                        width: 71.16,
                      ),
                      const SizedBox(width: 10),
                      Image.asset("assets/logo.png"),
                    ],
                  ),
                ),
                const SizedBox(width: 10),
                Row(
                  children: [
                    Text(
                      user?.data?.firstname ?? ' . . . ',
                      style: const TextStyle(
                        fontSize: 20,
                        color: Colors.white,
                        fontWeight: FontWeight.normal,
                      ),
                    ),
                    IconButton(
                      onPressed: () {
                        scaffoldKey.currentState?.openEndDrawer();
                      },
                      icon: const Icon(
                        Icons.menu,
                        color: Colors.white,
                        size: 40,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
          Container(
            margin: const EdgeInsets.only(top: 10),
            child: Align(
              alignment: Alignment.bottomCenter,
              child: Column(
                children: [
                  SvgPicture.asset(
                    'assets/support_icon.svg',
                    color: Colors.white,
                    height: 90,
                    width: 90,
                  ),
                  const SizedBox(height: 15),
                  TextWidget(
                    text: 'support'.tr,
                    color: Colors.white,
                    fontSize: 24,
                    fontWeight: FontWeight.w300,
                    textAlign: TextAlign.center,
                  ),
                  const SizedBox(height: 10),
                ],
              ),
            ),
          )
        ],
      ),
    );
    return Directionality(
      textDirection:
          defaultLocale == "en" ? TextDirection.rtl : TextDirection.ltr,
      child: Scaffold(
        backgroundColor: backgroundColor,
        drawerScrimColor: Colors.black.withOpacity(0.7),
        key: scaffoldKey,
        endDrawer: const DrawerSideView(),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
        floatingActionButton: Container(
          width: widthSize(context),
          height: 60,
          margin: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
          child: TextButton(
            onPressed: () {
              Get.toNamed(Routes.NEW_TICKET);
            },
            style: ButtonStyle(
              shape: MaterialStateProperty.all(
                const RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(
                    Radius.circular(15),
                  ),
                ),
              ),
              backgroundColor: MaterialStateProperty.all(
                brandColor,
              ),
            ),
            child: TextWidget(
              text: "new_support_ticket".tr,
              fontSize: 18,
              fontWeight: FontWeight.normal,
              color: Colors.white,
            ),
          ),
        ),
        drawerEdgeDragWidth: widthSize(context),
        body: DoubleBackToCloseApp(
          snackBar: snackBar,
          child: GetBuilder(
            init: SupportController(),
            builder: (SupportController supportController) {
              return RefreshIndicator(
                onRefresh: controller.onRefresh,
                triggerMode: RefreshIndicatorTriggerMode.anywhere,
                backgroundColor: Colors.white,
                color: brandColor,
                child: supportController.fetchSupportData
                    ? Stack(
                        children: [
                          Container(
                            margin: const EdgeInsets.only(top: 250),
                            child: (controller
                                    .listOfSupportTickets?.isNotEmpty)!
                                ? SingleChildScrollView(
                                    physics:
                                        const AlwaysScrollableScrollPhysics(),
                                    child: Column(
                                      mainAxisAlignment:
                                          MainAxisAlignment.center,
                                      children:
                                          controller.listOfSupportTickets?.map(
                                        (e) {
                                          return Container(
                                            color: Colors.white,
                                            margin: controller
                                                        .listOfSupportTickets
                                                        ?.last ==
                                                    e
                                                ? const EdgeInsets.only(
                                                    bottom: 80)
                                                : null,
                                            padding: const EdgeInsets.only(
                                              top: 10,
                                              bottom: 10,
                                              left: 15,
                                              right: 15,
                                            ),
                                            child: InkWell(
                                              onTap: () {
                                                Get.toNamed(
                                                  Routes.SINGLE_TICKET,
                                                  arguments: e,
                                                );
                                              },
                                              child: Column(
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.start,
                                                children: [
                                                  Container(
                                                    margin:
                                                        const EdgeInsets.all(
                                                            10),
                                                    child: Row(
                                                      mainAxisAlignment:
                                                          MainAxisAlignment
                                                              .spaceBetween,
                                                      crossAxisAlignment:
                                                          CrossAxisAlignment
                                                              .start,
                                                      children: [
                                                        TextWidget(
                                                          text: e.createdAt
                                                              ?.split(' ')[0],
                                                          color: Colors.black,
                                                          fontSize: 22,
                                                        ),
                                                        TextWidget(
                                                          text: e.subject,
                                                          fontSize: 20,
                                                          color: const Color(
                                                              0xff7A7A7A),
                                                        ),
                                                      ],
                                                    ),
                                                  ),
                                                  const SizedBox(height: 15),
                                                  Padding(
                                                    padding: const EdgeInsets
                                                            .symmetric(
                                                        horizontal: 10),
                                                    child: _getTicketStatus(e),
                                                  ),
                                                  const SizedBox(height: 4),
                                                  const Divider(),
                                                ],
                                              ),
                                            ),
                                          );
                                        },
                                      ).toList() as List<Widget>,
                                    ),
                                  )
                                : Center(
                                    child: Column(
                                      mainAxisAlignment:
                                          MainAxisAlignment.center,
                                      children: [
                                        TextWidget(
                                          text: 'empty_support'.tr,
                                          color: Colors.grey,
                                          fontSize: 24,
                                          fontWeight: FontWeight.w500,
                                          textAlign: TextAlign.center,
                                        ),
                                        const SizedBox(height: 15),
                                        InkWell(
                                          child: const Icon(
                                            Icons.refresh,
                                            color: Colors.grey,
                                            size: 50,
                                          ),
                                          onTap: controller.onRefresh,
                                        ),
                                      ],
                                    ),
                                  ),
                          ),
                          stackedContainer,
                        ],
                      )
                    : Stack(
                        children: [
                          Center(
                            child: CircularProgressIndicator(
                              color: brandColor,
                            ),
                          ),
                          stackedContainer,
                        ],
                      ),
              );
            },
          ),
        ),
      ),
    );
  }

  Widget _getTicketStatus(Data e) {
    String? statusString;
    Color? statusColor;
    if (e.closed == 0) {
      statusString = "ticket_status_waiting".tr;
      statusColor = const Color(0xffEB7923);
    } else {
      if (e.solved == 1) {
        statusString = "ticket_status_solved".tr;
        statusColor = brandColor;
      }
      if (e.solved == 0) {
        statusString = "ticket_status_closed".tr;
        statusColor = Colors.green;
      }
    }
    return TextWidget(
      text: statusString!,
      fontSize: 20,
      fontWeight: FontWeight.w700,
      color: statusColor,
    );
  }
}