import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'gaslist_controller.dart';

class GaslistPage extends GetView<GaslistController> {
  static const namedRoute = '/gas-stations-list-page';
  const GaslistPage({super.key});

  @override
  Widget build(BuildContext context) {
    var gasCtrl = controller;
    return PopScope(
      canPop: false,
      child: SafeArea(
        child: Scaffold(
          appBar: AppBar(
            shadowColor: Colors.grey,
            title: const Text('Gas Stations'),
            centerTitle: true,
            actions: [
              IconButton(
                icon: Icon(Icons.list, color: Colors.grey.shade300),
                onPressed: () async {
                  // Handle go to Chart View
                  gasCtrl.goToListView();
                },
              ),
              IconButton(
                icon: Icon(Icons.logout, color: Colors.grey.shade300),
                onPressed: () async {
                  // Handle logout logic here
                  gasCtrl.logoutSessionAndGoToLoginPage();
                },
              ),
            ],
          ),
          body: Obx(
            () => gasCtrl.isLoadingList.value == true
                ? Center(
                    child: Text('GasStations'),
                  )
                : Column(
                    children: [
                      SizedBox(                        
                        child: Wrap(
                          alignment: WrapAlignment.center,
                          spacing: 50,
                          children: [
                            Divider(
                              color: Colors.grey.shade300,
                            ),
                            ElevatedButton(
                              onPressed: () async {
                                gasCtrl.szRxGasArt.value = 'DIE';
                                await gasCtrl.loadListData();
                              },
                              style: ElevatedButton.styleFrom(
                                backgroundColor: Colors.grey.shade800,
                                foregroundColor: Colors
                                    .orange, // Hintergrundfarbe des Buttons
                              ),
                              child: Column(
                                children: [
                                  Text('Diesel'),
                                  Text('DIE'),
                                ],
                              ),
                            ),
                            ElevatedButton(
                              onPressed: () async {
                                gasCtrl.szRxGasArt.value = 'SUP';
                                await gasCtrl.loadListData();
                              },
                              style: ElevatedButton.styleFrom(
                                backgroundColor: Colors.grey.shade800,
                                foregroundColor: Colors
                                    .orange, // Hintergrundfarbe des Buttons
                              ),
                              child: Column(
                                children: [
                                  Text('Benzin'),
                                  Text('SUP'),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                      Divider(
                        color: Colors.grey.shade300,
                        
                      ),
                      Expanded(
                        child: ListView.builder(
                          itemCount: 5,
                          itemBuilder: (context, index) {
                            var gasStation = gasCtrl.gasStationsList[index];
                            return ListTile(
                              shape: RoundedRectangleBorder(
                                side: BorderSide(
                                  color: Colors.grey, // Border color
                                  width: 1.0, // Border thickness
                                ),
                                borderRadius: BorderRadius.circular(5.0),
                              ),
                              onTap: () {
                                // Handle item tap if needed
                                gasCtrl.openDirectionMaps(
                                    gasStation.location!.latitude!,
                                    gasStation.location!.longitude!);
                              },
                              title: Text(gasStation.name ?? 'No Name'),
                              subtitle: Column(
                                mainAxisSize: MainAxisSize.min,
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(gasStation.location?.address ??
                                      'No Address'),
                                  Text(gasStation.distance != null
                                      ? '${gasStation.distance?.toStringAsFixed(2)} km'
                                      : 'No Distance'),
                                ],
                              ),
                              trailing: gasStation.prices != null &&
                                      gasStation.prices!.isNotEmpty
                                  ? Column(
                                      children: [
                                        Text(gasStation.prices?[0].fuelType ??
                                            'N/A'),
                                        Text(
                                            '${gasStation.prices?[0].amount?.toStringAsPrecision(4) ?? 'N/A'} €'),
                                      ],
                                    )
                                  : const Text('N/A'),
                            );
                          },
                        ),
                      ),
                    ],
                  ),
          ),
        ),
      ),
    );
  }
}