import 'package:flutter/material.dart';
import 'package:get/get.dart';
import './tanklist_controller.dart';
import './widgets/my_list_tile_item.dart';

class TanklistPage extends GetView<TanklistController> {
  static const namedRoute = '/tank-stop-liste-page';
  const TanklistPage({super.key});

  @override
  Widget build(BuildContext context) {
    var tankListCtrl = controller;
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('Tankstops'),
          centerTitle: true,
          //backgroundColor: Colors.grey.shade600,
          actions: [
            IconButton(
              icon: Icon(Icons.add_chart, color: Colors.grey.shade300),
              onPressed: () async {
                // Handle go to Chart View
                tankListCtrl.goToChartView();
              },
            ),
            IconButton(
              icon: Icon(Icons.logout, color: Colors.grey.shade300),
              onPressed: () async {
                // Handle logout logic here
                tankListCtrl.logoutSessionAndGoToLoginPage();
              },
            ),
          ],
        ),
        floatingActionButton: Column(
          mainAxisAlignment:
              MainAxisAlignment.end, // Positioniere die Buttons am unteren Ende
          crossAxisAlignment: CrossAxisAlignment.end, // Richte sie rechts aus
          mainAxisSize: MainAxisSize.min, // Nimm nur den benötigten Platz ein
          children: [
            FloatingActionButton(
              onPressed: () => tankListCtrl.goToInputPage(),
              backgroundColor: Colors.blue,
              child: Icon(Icons.add),
            ),
            const SizedBox(width: 16),
            FloatingActionButton(
              onPressed: () => tankListCtrl.goToTrackingPage(),
              backgroundColor: Colors.green,
              child: Icon(Icons.gps_fixed_rounded),
            ),
          ],
        ),
        body: Obx(() 
          => tankListCtrl.isloadingList.value == false ? Padding(
            padding: EdgeInsetsGeometry.only(left: 25, right: 25),
            child: ListView.builder(
              padding: EdgeInsets.only(top: 8, bottom: 8),
              physics: const BouncingScrollPhysics(),
              itemBuilder: ((BuildContext context, int index) {
                var item = tankListCtrl.tankList[index];
                return Column(
                  children: [
                    Container(
                      decoration: BoxDecoration(
                        color: Colors.blue.withValues(alpha: 0.2),
                        borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(20),
                          bottomRight: Radius.circular(20),
                        ),
                        boxShadow: [
                          BoxShadow(
                            color: Colors.grey.withValues(
                              alpha: 0.7,
                            ), // Die Farbe des Schattens
                            spreadRadius:
                                2, // Wie weit sich der Schatten ausbreitet
                            blurRadius:
                                3, // Wie stark der Schatten verschwommen ist
                            offset: const Offset(
                              0,
                              3,
                            ), // Der Versatz des Schattens (x, y)
                          ),
                        ],
                      ),
                      child: MyListTileItem(listItem: item),
                    ),
                    SizedBox(height: 15),
                  ],
                );
              }),
              itemCount: tankListCtrl.tankList.length,
            ),
          ):Center(
            child: CircularProgressIndicator(
              color: Colors.blue,
            ),
          )
        ),
      ),
    );
  }
}