import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:form_builder_validators/form_builder_validators.dart';

import 'package:get/get.dart';

import 'package:flutter_svg/flutter_svg.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';

import '../controllers/new_ticket_controller.dart';

class NewTicketView extends GetView<NewTicketController> {
  NewTicketView({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(),
        drawerEdgeDragWidth: widthSize(context),
        body: GetBuilder(
          builder: (NewTicketController newTicketController) {
            return Stack(
              children: [
                Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                    width: widthSize(context),
                    height: 60,
                    margin: const EdgeInsets.symmetric(
                        horizontal: 20, vertical: 20),
                    child: TextButton(
                      onPressed: () {
                        controller.sendTicket();
                      },
                      style: ButtonStyle(
                        shape: MaterialStateProperty.all(
                          const RoundedRectangleBorder(
                            borderRadius: BorderRadius.all(
                              Radius.circular(15),
                            ),
                          ),
                        ),
                        backgroundColor: MaterialStateProperty.all(
                          brandColor,
                        ),
                      ),
                      child: !newTicketController.inputsEntered
                          ? TextWidget(
                              text: "send".tr,
                              fontSize: 18,
                              fontWeight: FontWeight.normal,
                              color: Colors.white,
                            )
                          : const CircularProgressIndicator(
                              color: Colors.white,
                            ),
                    ),
                  ),
                ),
                FormBuilder(
                  key: controller.formKey,
                  child: Container(
                    margin: const EdgeInsets.only(top: 250),
                    child: SingleChildScrollView(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: [
                          const SizedBox(height: 30),
                          Container(
                            margin: const EdgeInsets.symmetric(horizontal: 20),
                            child: TextWidget(
                              text: 'new_ticket_title'.tr,
                              fontSize: 22,
                              fontWeight: FontWeight.normal,
                              textAlign: TextAlign.right,
                            ),
                          ),
                          const SizedBox(height: 60),
                          Container(
                            height: 80,
                            margin: const EdgeInsets.only(
                              right: 20.0,
                              left: 20.0,
                            ),
                            child: FormBuilderTextField(
                              textDirection: textDirection,
                              autovalidateMode:
                                  AutovalidateMode.onUserInteraction,
                              onChanged: controller.onChangeSubject,
                              name: 'ticket_subject',
                              onEditingComplete: () {
                                FocusScope.of(context).unfocus();
                              },
                              textAlign: defaultLocale == "en"
                                  ? TextAlign.left
                                  : TextAlign.right,
                              validator: FormBuilderValidators.compose(
                                [
                                  FormBuilderValidators.required(
                                    errorText: 'subject_input_error'.tr,
                                  ),
                                  FormBuilderValidators.minLength(
                                    5,
                                    errorText: 'subject_input_num'.tr,
                                  ),
                                ],
                              ),
                              keyboardType: TextInputType.text,
                              style: buildTextStyle(
                                fontSize: 20,
                                color: Colors.black,
                              ),
                              decoration: InputDecoration(
                                hintTextDirection: defaultLocale == "en"
                                    ? TextDirection.ltr
                                    : TextDirection.rtl,
                                fillColor: Colors.white,
                                hintText: 'subject'.tr,
                                border: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(15),
                                  borderSide: const BorderSide(
                                    color: Colors.black,
                                  ),
                                ),
                                errorMaxLines: 2,
                                filled: true,
                                isDense: true,
                                errorStyle: buildTextStyle(
                                  fontSize: 12,
                                  color:
                                      const Color.fromARGB(255, 184, 184, 184),
                                ),
                                hintStyle: buildTextStyle(
                                  color:
                                      const Color.fromARGB(255, 184, 184, 184),
                                  fontSize: 19,
                                ),
                              ),
                            ),
                          ),
                          const SizedBox(height: 28),
                          Container(
                            height: 325,
                            margin: const EdgeInsets.only(
                              right: 20.0,
                              left: 20.0,
                            ),
                            child: FormBuilderTextField(
                              textDirection: textDirection,
                              textAlign: defaultLocale == "en"
                                  ? TextAlign.left
                                  : TextAlign.right,
                              autovalidateMode:
                                  AutovalidateMode.onUserInteraction,
                              textAlignVertical: TextAlignVertical.top,
                              onChanged: controller.onChangeMessage,
                              name: 'ticket_message',
                              onEditingComplete: () {
                                FocusScope.of(context).unfocus();
                              },
                              validator: FormBuilderValidators.compose(
                                [
                                  FormBuilderValidators.required(
                                    errorText: 'message_input_error'.tr,
                                  ),
                                  FormBuilderValidators.minLength(
                                    10,
                                    errorText: 'message_input_num'.tr,
                                  ),
                                ],
                              ),
                              expands: true,
                              minLines: null,
                              maxLines: null,
                              style: buildTextStyle(
                                fontSize: 20,
                                color: Colors.black,
                              ),
                              keyboardType: TextInputType.multiline,
                              textInputAction: TextInputAction.newline,
                              decoration: InputDecoration(
                                hintTextDirection: defaultLocale == "en"
                                    ? TextDirection.ltr
                                    : TextDirection.rtl,
                                fillColor: Colors.white,
                                hintText: 'message'.tr,
                                border: OutlineInputBorder(
                                  borderRadius: BorderRadius.circular(15),
                                  borderSide: const BorderSide(
                                    color: Colors.black,
                                  ),
                                ),
                                filled: true,
                                hintStyle: buildTextStyle(
                                  color:
                                      const Color.fromARGB(255, 184, 184, 184),
                                  fontSize: 19,
                                ),
                                errorMaxLines: 2,
                                isDense: true,
                                errorStyle: buildTextStyle(
                                  fontSize: 12,
                                  color:
                                      const Color.fromARGB(255, 184, 184, 184),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
                stackedContainer,
              ],
            );
          },
        ),
      ),
    );
  }
}