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

import 'package:get/get.dart';
import 'package:IQ/app/global/static_informs.dart';
import 'package:IQ/app/global/text_field.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/controllers/home_controller.dart';
import 'package:IQ/app/modules/home/providers/user.dart';
import 'package:IQ/app/routes/app_pages.dart';

import '../controllers/fill_card_controller.dart';

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

  @override
  Widget build(BuildContext context) {
    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: (FillCardController c) {
            return Stack(
              children: [
                !c.inputsEntered
                    ? !c.succeededFill
                        ? Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              const SizedBox(height: 330),
                              Container(
                                margin:
                                    const EdgeInsets.symmetric(horizontal: 22),
                                child: Align(
                                  alignment: defaultLocale == "en"
                                      ? Alignment.centerLeft
                                      : Alignment.centerRight,
                                  child: TextWidget(
                                    text: 'card_top-up'.tr,
                                    textAlign: TextAlign.left,
                                    fontSize: 22,
                                    fontWeight: FontWeight.w500,
                                    color: brandColor,
                                  ),
                                ),
                              ),
                              FormBuilder(
                                key: controller.formKey,
                                child: BuildTextField(
                                  hintTextDirection: textDirection,
                                  textDirection: textDirection,
                                  onChanged:
                                      controller.onChangeSecretNumberInput,
                                  signup: true,
                                  filled: true,
                                  inputColor: Colors.black,
                                  fillColor: Colors.white,
                                  height: heightSize(context) * 0.1,
                                  name: 'card_secret_number',
                                  hintText: 'card_secret_num'.tr,
                                  obscureText: false,
                                  margin: const EdgeInsets.only(
                                    top: 20,
                                    right: 20.0,
                                    left: 20.0,
                                  ),
                                  onEditingComplete: () {
                                    FocusScope.of(context).unfocus();
                                  },
                                  validator: FormBuilderValidators.compose(
                                    [
                                      FormBuilderValidators.required(
                                        errorText:
                                            'card_secret_num_validation'.tr,
                                      ),
                                    ],
                                  ),
                                  keyboardType: TextInputType.number,
                                  errorMaxLines: 2,
                                ),
                              ),
                              const SizedBox(height: 20),
                              Container(
                                width: widthSize(context),
                                height: 60,
                                decoration: const BoxDecoration(
                                  gradient: LinearGradient(
                                    colors: [
                                      Color(0xFF4009C0),
                                      Color(0xFF8C5EF6)
                                    ], // Gradient colors
                                    begin: Alignment.centerLeft,
                                    end: Alignment.centerRight,
                                  ),
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(5)),
                                ),
                                margin: const EdgeInsets.symmetric(
                                    horizontal: 15, vertical: 29),
                                child: TextButton(
                                  onPressed: controller.redeemSecretNumber,
                                  child: GetBuilder(
                                    builder: (HomeController c) {
                                      return TextWidget(
                                        text: 'entered_card_secret_num'.tr,
                                        fontSize: 18,
                                        fontWeight: FontWeight.normal,
                                        color: Colors.white,
                                      );
                                    },
                                  ),
                                ),
                              ),
                              const Spacer(),
                              TextButton(
                                onPressed: () {
                                  Get.offNamed(Routes.HOME);
                                },
                                child: Container(
                                  decoration: BoxDecoration(
                                    border: Border(
                                      bottom: BorderSide(
                                        color: brandColor,
                                        width: 1,
                                      ),
                                    ),
                                  ),
                                  child: TextWidget(
                                    color: brandColor,
                                    fontSize: 26,
                                    text: 'backfrom_card_secret_num'.tr,
                                    fontWeight: FontWeight.w400,
                                  ),
                                ),
                              ),
                              const SizedBox(height: 30),
                            ],
                          )
                        : Center(
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                const SizedBox(height: 330),
                                SvgPicture.asset(
                                  'assets/success_fill.svg',
                                  width: 200,
                                  height: 200,
                                ),
                                const SizedBox(height: 20),
                                TextWidget(
                                  text: 'Top_up_status'.tr,
                                  color: brandColor,
                                  fontSize: 22,
                                ),
                                const Spacer(),
                                TextButton(
                                  onPressed: () {
                                    Get.offNamed(Routes.HOME);
                                  },
                                  child: Container(
                                    decoration: BoxDecoration(
                                      border: Border(
                                        bottom: BorderSide(
                                          color: brandColor,
                                          width: 1,
                                        ),
                                      ),
                                    ),
                                    child: TextWidget(
                                      color: brandColor,
                                      fontSize: 20,
                                      text: 'backfrom_card_secret_num'.tr,
                                      fontWeight: FontWeight.w400,
                                    ),
                                  ),
                                ),
                                const SizedBox(height: 20),
                              ],
                            ),
                          )
                    : Center(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            const SizedBox(height: 330),
                            CircularProgressIndicator(
                              color: brandColor,
                              strokeWidth: 2,
                            ),
                            const SizedBox(height: 30),
                            TextWidget(
                              text: 'Top_up_status_waiting'.tr,
                              color: Colors.black,
                              fontSize: 22,
                            ),
                          ],
                        ),
                      ),
                Container(
                  height: 250,
                  decoration: BoxDecoration(
                    color: brandColor,
                    image: const DecorationImage(
                      image: AssetImage('assets/background.png'),
                      fit: BoxFit.fill,
                    ),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.end,
                    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.symmetric(horizontal: 20),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.end,
                          crossAxisAlignment: CrossAxisAlignment.end,
                          children: [
                            TextWidget(
                              text: 'subscription_type'.tr,
                              color: Colors.white,
                              fontSize: 18,
                              fontWeight: FontWeight.w300,
                              textAlign: TextAlign.start,
                            ),
                            const SizedBox(height: 5),
                            GetBuilder(
                                init: HomeController(),
                                builder: (HomeController c) {
                                  return TextWidget(
                                    text: c.profileName ?? ' . . . ',
                                    color: Colors.white,
                                    fontSize: 32,
                                    fontWeight: FontWeight.bold,
                                    textAlign: TextAlign.center,
                                  );
                                }),
                          ],
                        ),
                      ),
                      const SizedBox(height: 5),
                    ],
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}