import 'package:double_back_to_close_app/double_back_to_close_app.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

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

import '../controllers/available_packages_controller.dart';

class AvailablePackagesView extends GetView<AvailablePackagesController> {
  AvailablePackagesView({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/package.svg',
                    color: Colors.white,
                    height: 60,
                    width: 60,
                  ),
                  const SizedBox(height: 3),
                  TextWidget(
                    text: 'available_packages'.tr,
                    color: Colors.white,
                    fontSize: 24,
                    fontWeight: FontWeight.w300,
                    textAlign: TextAlign.center,
                  ),
                  const SizedBox(height: 10),
                ],
              ),
            ),
          )
        ],
      ),
    );
    return Directionality(
      textDirection:
          defaultLocale != "en" ? TextDirection.ltr : TextDirection.rtl,
      child: Scaffold(
        backgroundColor: backgroundColor,
        drawerScrimColor: Colors.black.withOpacity(0.7),
        key: scaffoldKey,
        endDrawer: const DrawerSideView(),
        drawerEdgeDragWidth: widthSize(context),
        body: DoubleBackToCloseApp(
          snackBar: snackBar,
          child: GetBuilder(
            builder: (AvailablePackagesController availablePackagesController) {
              return RefreshIndicator(
                onRefresh: controller.onRefresh,
                triggerMode: RefreshIndicatorTriggerMode.anywhere,
                backgroundColor: Colors.white,
                color: brandColor,
                child: availablePackagesController.fetchPackagesData
                    ? Stack(
                        children: [
                          Container(
                            margin: const EdgeInsets.only(top: 270),
                            child: SingleChildScrollView(
                              physics: const AlwaysScrollableScrollPhysics(),
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: controller.listOfPackages?.map(
                                  (e) {
                                    Widget widget(Color color) => Container(
                                          height: 150,
                                          margin: const EdgeInsets.only(
                                            right: 25,
                                            left: 25,
                                            top: 10,
                                            bottom: 5,
                                          ),
                                          padding: const EdgeInsets.only(
                                            top: 5,
                                            bottom: 5,
                                            left: 10,
                                            right: 10,
                                          ),
                                          decoration: BoxDecoration(
                                            borderRadius:
                                                const BorderRadius.all(
                                              Radius.circular(20),
                                            ),
                                            color: Colors.white,
                                            border: Border.all(
                                              color: color,
                                              width: 2,
                                            ),
                                          ),
                                          child: Center(
                                            child: Row(
                                              mainAxisAlignment:
                                                  MainAxisAlignment
                                                      .spaceBetween,
                                              crossAxisAlignment:
                                                  CrossAxisAlignment.center,
                                              children: [
                                                Column(
                                                  mainAxisAlignment:
                                                      MainAxisAlignment.center,
                                                  crossAxisAlignment:
                                                      CrossAxisAlignment.start,
                                                  children: [
                                                    TextWidget(
                                                      text: controller
                                                          .subscriptionCurrency,
                                                      fontSize: 14,
                                                    ),
                                                    const SizedBox(height: 5),
                                                    TextWidget(
                                                      text: controller.oCcy
                                                          .format(e.price),
                                                      fontSize: 20,
                                                    ),
                                                  ],
                                                ),
                                                Expanded(
                                                  child: Column(
                                                    mainAxisAlignment:
                                                        MainAxisAlignment
                                                            .center,
                                                    crossAxisAlignment:
                                                        CrossAxisAlignment.end,
                                                    children: [
                                                      SizedBox(
                                                        width: 300,
                                                        child: TextWidget(
                                                          text: e.name,
                                                          fontSize: 24,
                                                          softWrap: true,
                                                          textAlign:
                                                              defaultLocale ==
                                                                      "en"
                                                                  ? TextAlign
                                                                      .left
                                                                  : TextAlign
                                                                      .right,
                                                          color: brandColor,
                                                        ),
                                                      ),
                                                      const SizedBox(height: 5),
                                                      TextWidget(
                                                        text: e.description,
                                                        fontSize: 15,
                                                        softWrap: false,
                                                        overflow:
                                                            TextOverflow.fade,
                                                        color: const Color(
                                                            0xff7A7A7A),
                                                      ),
                                                    ],
                                                  ),
                                                ),
                                              ],
                                            ),
                                          ),
                                        );
                                    if (e.name == controller.profileName) {
                                      return Stack(
                                        children: [
                                          widget(Colors.green),
                                          Container(
                                            height: 40,
                                            width: defaultLocale == "en"
                                                ? 85
                                                : 150,
                                            margin: defaultLocale == "en"
                                                ? const EdgeInsets.only(
                                                    right: 60,
                                                  )
                                                : const EdgeInsets.only(
                                                    left: 50,
                                                  ),
                                            padding: const EdgeInsets.all(10),
                                            decoration: const BoxDecoration(
                                              borderRadius: BorderRadius.all(
                                                Radius.circular(5),
                                              ),
                                              color: Color(0xff0B9721),
                                            ),
                                            child: Center(
                                              child: TextWidget(
                                                text: 'current_subscription'.tr,
                                                color: Colors.white,
                                                fontSize: 14,
                                              ),
                                            ),
                                          ),
                                        ],
                                      );
                                    }
                                    return widget(borderColor);
                                  },
                                ).toList() as List<Widget>,
                              ),
                            ),
                          ),
                          stackedContainer
                        ],
                      )
                    : Stack(
                        children: [
                          Center(
                            child: CircularProgressIndicator(
                              color: brandColor,
                            ),
                          ),
                          stackedContainer
                        ],
                      ),
              );
            },
          ),
        ),
      ),
    );
  }
}