import 'dart:io';

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

import 'package:get/get.dart';
import 'package:intl/intl.dart';
import 'package:IQ/app/global/converted_bytes.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/models/traffic_model.dart';
import 'package:IQ/app/modules/home/providers/traffic.dart';
import 'package:IQ/app/modules/home/providers/user.dart';
import 'package:IQ/app/modules/service/api_service.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

import '../controllers/data_usage_controller.dart';
import 'dart:convert';

import 'package:IQ/app/global/snono_encrypt.dart';

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

  @override
  State<DataUsageView> createState() => _DataUsageViewState();
}

DateTime monthOfData = DateTime.now();

class _DataUsageViewState extends State<DataUsageView>
    with WidgetsBindingObserver {
  final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey();
  bool fetchDataUsageData = false;

  Future<Traffic?>? getTraffic;
  bool? changeMonthLoading;
  Traffic? traffic;
  List<int>? list = [];
  Future<Traffic?>? getTrafficInforms() async {
    await getTodayTraffic();
    setState(() {});

    String payload = AES.encrypt(
      data: jsonEncode({
        "report_type": "daily",
        "month": monthOfData.month,
        "year": monthOfData.year,
        "user_id": null,
      }),
      passpharse: 'abcdefghijuklmno0123456789012345',
    );
    var value = await APIService.post('traffic', payload);
    traffic = Traffic.fromJson(jsonDecode(value));
    chartData = traffic?.data?.totalReal?.map(
      (e) {
        DateTime lastDayOfMonth = DateTime(
          monthOfData.year,
          monthOfData.month + 1,
          0,
        );
        int? day;
        // ignore: unnecessary_null_comparison
        if (day == null) {
          day = (traffic?.data?.totalReal?.indexOf(e))! + 1;
        } else {
          if ((traffic?.data?.totalReal?.indexOf(e))! > 0 &&
              (traffic?.data?.totalReal?.indexOf(e))! < lastDayOfMonth.day) {
            day = (traffic?.data?.totalReal?.indexOf(e))! + 7;
          }
        }
        return DataUsage(
          DateTime(
            monthOfData.year,
            monthOfData.month,
            day,
          ),
          e.toDouble(),
        );
      },
    ).toList();
    changeMonthLoading = false;
    fetchDataUsageData = true;
    setState(() {});
    return traffic;
  }

  List<DataUsage>? chartData;
  TooltipBehavior? tooltipBehavior;
  String directionsImage =
      defaultLocale == "en" ? 'assets/next.svg' : "assets/left-arrow.svg";
  String directionsImage2 =
      defaultLocale == "en" ? 'assets/left-arrow.svg' : "assets/next.svg";
  @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];
      directionsImage =
          defaultLocale == "en" ? 'assets/next.svg' : "assets/left-arrow.svg";
      directionsImage2 =
          defaultLocale == "en" ? 'assets/left-arrow.svg' : "assets/next.svg";
      snackBarText = 'back_twice'.tr;
    }
  }

  @override
  void initState() {
    getTraffic = getTrafficInforms();
    tooltipBehavior = TooltipBehavior(enable: true);
    WidgetsBinding.instance.addObserver(this);
    super.initState();
  }

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

  @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,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              TextWidget(
                text: 'data_usage_screen_title'.tr,
                color: Colors.white,
                fontSize: 18,
                fontWeight: FontWeight.w300,
                textAlign: TextAlign.center,
              ),
              SvgPicture.asset(
                'assets/trafic.svg',
                color: Colors.white,
                fit: BoxFit.contain,
                height: 60,
                width: 60,
              ),
              Directionality(
                textDirection: defaultLocale == "en"
                    ? td.TextDirection.ltr
                    : td.TextDirection.rtl,
                child: TextWidget(
                  text: totalGBs,
                  // text: '$totalGBs',
                  color: Colors.white,
                  fontSize: 32,
                  fontWeight: FontWeight.bold,
                  textAlign: TextAlign.center,
                ),
              ),
            ],
          ),
        ],
      ),
    );
    return Directionality(
      textDirection:
          defaultLocale != "en" ? td.TextDirection.ltr : td.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: fetchDataUsageData
              ? Stack(
                  children: [
                    Column(
                      children: [
                        const SizedBox(height: 270),
                        Container(
                          margin: defaultLocale == "en"
                              ? const EdgeInsets.only(
                                  left: 15,
                                  bottom: 10,
                                )
                              : const EdgeInsets.only(
                                  right: 15,
                                  bottom: 10,
                                ),
                          child: Align(
                            alignment: defaultLocale == "en"
                                ? Alignment.centerLeft
                                : Alignment.centerRight,
                            child: TextWidget(
                              text: 'data_usage_title'.tr,
                              fontSize: 22,
                              color: brandColor,
                              fontWeight: FontWeight.w400,
                            ),
                          ),
                        ),
                        Container(
                          height: 400,
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: const BorderRadius.all(
                              Radius.circular(20),
                            ),
                            border: Border.all(
                              color: borderColor,
                              width: 1,
                            ),
                          ),
                          padding: const EdgeInsets.all(20),
                          margin: const EdgeInsets.only(right: 10, left: 10),
                          child: Container(
                            padding: const EdgeInsets.symmetric(vertical: 20),
                            margin: const EdgeInsets.symmetric(vertical: 20),
                            child: GetBuilder(
                              builder: (DataUsageController c) {
                                return changeMonthLoading == null ||
                                        changeMonthLoading != true
                                    ? SfCartesianChart(
                                        tooltipBehavior: tooltipBehavior,
                                        backgroundColor: Colors.white,
                                        borderColor: borderColor,
                                        borderWidth: 0,
                                        isTransposed: false,
                                        margin: const EdgeInsets.symmetric(
                                            horizontal: 15),
                                        plotAreaBackgroundColor: Colors.white,
                                        plotAreaBorderColor: borderColor,
                                        plotAreaBorderWidth: 0,
                                        selectionGesture:
                                            ActivationMode.singleTap,
                                        selectionType: SelectionType.point,
                                        enableAxisAnimation: true,
                                        primaryXAxis: DateTimeAxis(
                                          edgeLabelPlacement:
                                              EdgeLabelPlacement.shift,
                                          borderWidth: 1,
                                          borderColor: Colors.white,
                                          labelAlignment: LabelAlignment.center,
                                          majorGridLines: const MajorGridLines(
                                            width: 0,
                                            color: Colors.transparent,
                                          ),
                                        ),
                                        primaryYAxis: NumericAxis(
                                          axisLabelFormatter:
                                              (AxisLabelRenderDetails details) {
                                            return ChartAxisLabel(
                                              formatBytes(
                                                  details.value.toInt(), 0),
                                              details.textStyle,
                                            );
                                          },
                                          borderWidth: 1,
                                          borderColor: Colors.white,
                                          labelAlignment: LabelAlignment.center,
                                          majorGridLines: MajorGridLines(
                                              width: 1, color: borderColor),
                                        ),
                                        series: <ChartSeries>[
                                          LineSeries<DataUsage, DateTime>(
                                            name: 'Total',
                                            dataSource: chartData ?? [],
                                            xValueMapper:
                                                (DataUsage xAxis, _) =>
                                                    xAxis.monthDay,
                                            yValueMapper:
                                                (DataUsage yAxis, _) =>
                                                    yAxis.bytes,
                                            color: brandColor,
                                            enableTooltip: true,
                                          ),
                                        ],
                                      )
                                    : Center(
                                        child: CircularProgressIndicator(
                                          color: brandColor,
                                        ),
                                      );
                              },
                            ),
                          ),
                        ),
                        Container(
                          margin: const EdgeInsets.only(top: 25),
                          child: Center(
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                TextButton(
                                  style: ButtonStyle(
                                    shape: MaterialStateProperty.all(
                                      const CircleBorder(),
                                    ),
                                  ),
                                  onPressed: () {
                                    if (monthOfData.month > 1) {
                                      changeMonthLoading = true;
                                      chartData = [];
                                      monthOfData = DateTime(
                                        monthOfData.year,
                                        monthOfData.month - 1,
                                      );
                                      getTraffic = getTrafficInforms();
                                      setState(() {});
                                    }
                                  },
                                  child: SvgPicture.asset(
                                    directionsImage,
                                    height: 35,
                                    width: 35,
                                  ),
                                ),
                                const SizedBox(width: 50),
                                GetBuilder(
                                  builder: (DataUsageController c) {
                                    return TextWidget(
                                      text: DateFormat('MMMM').format(
                                        DateTime(
                                          monthOfData.year,
                                          monthOfData.month,
                                        ),
                                      ),
                                      fontSize: 22,
                                      color: Colors.black,
                                      fontWeight: FontWeight.w500,
                                    );
                                  },
                                ),
                                const SizedBox(width: 50),
                                TextButton(
                                  style: ButtonStyle(
                                    shape: MaterialStateProperty.all(
                                      const CircleBorder(),
                                    ),
                                  ),
                                  onPressed: () {
                                    if (monthOfData.month < 12) {
                                      changeMonthLoading = true;
                                      chartData = [];
                                      monthOfData = DateTime(
                                        monthOfData.year,
                                        monthOfData.month + 1,
                                      );
                                      getTraffic = getTrafficInforms();
                                      setState(() {});
                                    }
                                  },
                                  child: SvgPicture.asset(
                                    directionsImage2,
                                    height: 35,
                                    width: 35,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                    stackedContainer,
                  ],
                )
              : Stack(
                  children: [
                    Center(
                      child: CircularProgressIndicator(
                        color: brandColor,
                      ),
                    ),
                    stackedContainer,
                  ],
                ),
        ),
      ),
    );
  }
}

class DataUsage {
  DataUsage(this.monthDay, this.bytes);
  final DateTime monthDay;
  final double bytes;
}