import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../utils/extensions/constants.dart';
import './graph_controller.dart';
import './widgets/chart_desc.dart';
import './widgets/chart_lines.dart';
import './widgets/chart_single_lines.dart';
import './widgets/my_list_tile_card.dart';
import '../../pages/tanklist/tanklist_view.dart';

class GraphPage extends GetView<GraphController> {
  static const namedRoute = '/graph-statistic-page';
  const GraphPage({super.key});

  @override
  Widget build(BuildContext context) {
    Size queryDisplaySize = MediaQuery.of(context).size;
    var graphCtrl = controller;
    return PopScope(
      canPop: false,
      child: SafeArea(
        child: Scaffold(
          body: Column(
            children: [
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 10.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    SizedBox(
                      width: 50,
                      child: IconButton(
                        onPressed: () =>
                            Get.offAndToNamed(TanklistPage.namedRoute),
                        icon: const Icon(Icons.list),
                      ),
                    ),
                    SizedBox(
                      width: queryDisplaySize.width - 70,
                      child: Obx(() => _displayDropDownMenue(graphCtrl)),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 8.0),
              Obx(
                () => Container(
                  color: Colors.grey.shade900,
                  padding: const EdgeInsets.symmetric(horizontal: 40),
                  width: MediaQuery.of(context).size.width,
                  child: Column(
                    children: [
                      ChartDescription(
                        backgroundColor: kColorEuroChart,
                        mnWidth: double.infinity,
                        szDescText: '€ Jahressumme',
                        szCurrentSumData:
                            graphCtrl.mnCurrentSummEuroYear.toStringAsFixed(2),
                      ),
                      ChartDescription(
                        backgroundColor: kColorBenzinChart,
                        mnWidth: double.infinity,
                        szDescText: 'L Jahresverbrauch',
                        szCurrentSumData:
                            graphCtrl.mnCurrentSummLiterYear.toStringAsFixed(2),
                      ),
                    ],
                  ),
                ),
              ),
              const Divider(),
              LineChartLines(
                firstLineColor: kColorEuroChart,
                secondLineColor: kColorBenzinChart,
              ),
              Obx(
                () => graphCtrl.blIsLoading.value
                    ? const Center(
                        child: CircularProgressIndicator(color: Colors.cyan),
                      )
                    : const SizedBox.shrink(),
              ),
              const Divider(),
              Obx(
                () => Container(
                  color: Colors.grey.shade900,
                  padding: const EdgeInsets.symmetric(horizontal: 40),
                  child: ChartDescription(
                    backgroundColor: kColorPerLiterChart,
                    mnWidth: queryDisplaySize.width,
                    szDescText: '€/L Durchschnitt',
                    szCurrentSumData: graphCtrl.mnCurrentAveragePerLiter.value
                        .toStringAsFixed(2),
                  ),
                ),
              ),
              const Divider(),
              LineChartSingleLine(singleLineColor: kColorPerLiterChart),
              const Divider(),
              Obx(
                () => graphCtrl.blIsLoading.value
                    ? const Center(
                        child: CircularProgressIndicator(color: Colors.cyan),
                      )
                    : const SizedBox.shrink(),
              ),
              Obx(
                () => Expanded(
                  child: ListView.builder(
                    itemCount: graphCtrl.sumListData.length,
                    itemBuilder: (context, index) {
                      return MyListTileCard(graphCtrl: graphCtrl, index: index);
                    },
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  DropdownButtonFormField _displayDropDownMenue(GraphController controller) {
    var graphCtrl = controller;
    var list = graphCtrl.listYearModel;
    var valueOfList = graphCtrl.yearValue.value;
    return DropdownButtonFormField(
      decoration: kInputDecorationDropDownMenueYear,
      items: list.map((map) {
        return DropdownMenuItem(
          value: map.mnYear,
          child: Text(map.szDescription),
        );
      }).toList(),
      isDense: true,
      isExpanded: true,
      value: valueOfList,
      onChanged: ((value) {
        valueOfList = value;
        graphCtrl.yearValue.value = valueOfList;
        if (graphCtrl.yearValue.value > 0) {
          graphCtrl.getTankListPerYear();
        }
      }),
    );
  }
}