import 'dart:io';

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

import 'package:get/get.dart';
import 'package:IQ/app/global/static_informs.dart';
import 'package:IQ/app/global/text_widget.dart';
import 'package:IQ/app/modules/login/bindings/login_binding.dart';
import 'package:IQ/app/modules/login/views/login_view.dart';
import 'package:IQ/app/routes/app_pages.dart';
import 'package:IQ/main.dart';

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

  @override
  State<DrawerSideView> createState() => _DrawerSideViewState();
}

class _DrawerSideViewState extends State<DrawerSideView>
    with WidgetsBindingObserver {
  final List<String> itemsStrings = [
    'drawer_home'.tr,
    'drawer_dataUsage'.tr,
    // 'drawer_dataStream'.tr,
    'drawer_availablePackages'.tr,
    'drawer_wifi_test'.tr,
    'drawer_notifications'.tr,
    'drawer_logout'.tr,
    'drawer_support'.tr,
    'drawer_aboutApp'.tr,
  ];

  final List<String> itemsIcons = [
    'assets/drawer icons/icon1.svg',
    'assets/drawer icons/icon2.svg',
    // 'assets/dataflow.svg',
    'assets/drawer icons/icon3.svg',
    'assets/drawer icons/icon2.svg',
    'assets/drawer icons/icon6.svg',
    'assets/drawer icons/icon7.svg',
    'assets/drawer icons/icon5.svg',
    'assets/drawer icons/icon8.svg',
  ];
  AlignmentGeometry alignment =
      defaultLocale == "en" ? Alignment.centerLeft : Alignment.centerRight;
  EdgeInsetsGeometry? marginAbout = defaultLocale == "en"
      ? const EdgeInsets.only(
          left: 60.0,
        )
      : const EdgeInsets.only(
          right: 80.0,
        );
  EdgeInsetsGeometry? marginOthers = defaultLocale == "en"
      ? const EdgeInsets.only(left: 60.0, top: 5)
      : const EdgeInsets.only(right: 80.0, top: 5);

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    if (state == AppLifecycleState.inactive ||
        state == AppLifecycleState.detached ||
        state == AppLifecycleState.paused) return;
    if (state == AppLifecycleState.resumed) {
      defaultLocale = Platform.localeName.split('_')[0];
      alignment =
          defaultLocale == "en" ? Alignment.centerLeft : Alignment.centerRight;
      marginOthers = defaultLocale == "en"
          ? const EdgeInsets.only(left: 60.0, top: 5)
          : const EdgeInsets.only(right: 80.0, top: 5);
    }
  }

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    super.dispose();
    WidgetsBinding.instance.removeObserver(this);
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: widthSize(context) * 0.8,
      child: Drawer(
        backgroundColor: Colors.white,
        child: Stack(
          children: [
            SingleChildScrollView(
              child: Column(
                children: [
                  const SizedBox(height: 250),
                  ...itemsStrings.map(
                    (item) {
                      return Container(
                        margin: const EdgeInsets.symmetric(vertical: 8.0),
                        child: TextButton(
                          onPressed: () {
                            if (item == 'drawer_logout'.tr) {
                              Get.back();
                              storage.remove('token');
                              isExpired = false;
                              token = null;
                              setState(() {});
                              Get.offAll(
                                () => LoginView(),
                                binding: LoginBinding(),
                              );
                            } else if (item == 'drawer_dataUsage'.tr) {
                              Get.back();
                              Future.delayed(
                                const Duration(milliseconds: 300),
                                () => Get.offNamed(Routes.DATA_USAGE),
                              );
                            }
                            //  else if (item == 'drawer_dataStream'.tr) {
                            //   Get.back();
                            //   Future.delayed(
                            //     const Duration(milliseconds: 300),
                            //     () => Get.offNamed(Routes.LIVE_DATA),
                            //   );
                            // }
                            else if (item == 'drawer_availablePackages'.tr) {
                              Get.back();
                              Future.delayed(
                                const Duration(milliseconds: 300),
                                () => Get.offNamed(Routes.AVAILABLE_PACKAGES),
                              );
                            } else if (item == 'drawer_wifi_test'.tr) {
                              Get.back();
                              Future.delayed(
                                const Duration(milliseconds: 300),
                                () => Get.offNamed(Routes.WIFI_TEST),
                              );
                            } else if (item == 'drawer_notifications'.tr) {
                              Get.back();
                              Future.delayed(
                                const Duration(milliseconds: 300),
                                () => Get.offNamed(Routes.NOTIFICATIONS_SCREEN),
                              );
                            } else if (item == 'drawer_support'.tr) {
                              Get.back();
                              Future.delayed(
                                const Duration(milliseconds: 300),
                                () => Get.offNamed(Routes.CONTACT_US),
                              );
                            } else if (item == 'drawer_aboutApp'.tr) {
                              Get.back();
                              Future.delayed(
                                const Duration(milliseconds: 300),
                                () => Get.offNamed(Routes.ABOUT),
                              );
                            } else {
                              Get.back();
                              Future.delayed(
                                const Duration(milliseconds: 300),
                                () => Get.offNamed(Routes.HOME),
                              );
                            }
                          },
                          child: item != "drawer_aboutApp".tr
                              ? Stack(
                                  alignment: const Alignment(0, -2.5),
                                  children: [
                                    if (item == "drawer_support".tr)
                                      Align(
                                        child: Container(
                                          margin: const EdgeInsets.only(
                                            right: 10,
                                            left: 10,
                                          ),
                                          child: const Divider(),
                                        ),
                                      ),
                                    Container(
                                      margin: marginOthers,
                                      child: Align(
                                        alignment: alignment,
                                        child: TextWidget(
                                          color: Colors.black87,
                                          fontSize: 18,
                                          text: item,
                                          fontWeight: FontWeight.normal,
                                          textAlign: TextAlign.right,
                                        ),
                                      ),
                                    ),
                                    Container(
                                      margin:
                                          const EdgeInsets.only(right: 25.0),
                                      child: Align(
                                        alignment: alignment,
                                        child: item != 'drawer_dataStream'.tr
                                            ? SvgPicture.asset(
                                                itemsIcons[
                                                    itemsStrings.indexOf(item)],
                                                color: Colors.black,
                                                width: 33,
                                                height: 33,
                                              )
                                            : SvgPicture.asset(
                                                itemsIcons[
                                                    itemsStrings.indexOf(item)],
                                                color: Colors.black,
                                                width: 25,
                                                height: 25,
                                              ),
                                      ),
                                    ),
                                  ],
                                )
                              : Stack(
                                  children: [
                                    Container(
                                      margin: marginAbout,
                                      child: Align(
                                        alignment: defaultLocale == "en"
                                            ? Alignment.centerLeft
                                            : Alignment.centerRight,
                                        child: TextWidget(
                                          color: Colors.black87,
                                          fontSize: 18,
                                          text: item,
                                          fontWeight: FontWeight.normal,
                                          textAlign: TextAlign.right,
                                        ),
                                      ),
                                    ),
                                    Container(
                                      margin:
                                          const EdgeInsets.only(right: 25.0),
                                      child: Align(
                                        alignment: defaultLocale == "en"
                                            ? Alignment.centerLeft
                                            : Alignment.centerRight,
                                        child: SvgPicture.asset(
                                          itemsIcons[
                                              itemsStrings.indexOf(item)],
                                          color: Colors.black,
                                          width: 33,
                                          height: 33,
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                        ),
                      );
                    },
                  )
                ],
              ),
            ),
            Container(
              height: 250,
              width: widthSize(context),
              decoration: BoxDecoration(
                color: brandColor,
                image: const DecorationImage(
                  image: AssetImage('assets/background.png'),
                  fit: BoxFit.fill,
                ),
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: 80),
              child: Align(
                alignment: Alignment.topCenter,
                child: SvgPicture.asset(
                  'assets/2/icon.svg',
                  height: 60,
                  width: 60,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}