anyway/frontend/lib/modules/landmarks_overview.dart

import 'dart:collection';
import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

import 'package:anyway/modules/landmark_card.dart';
import 'package:anyway/structs/landmark.dart';
import 'package:anyway/structs/trip.dart';




class LandmarksOverview extends StatefulWidget {
  final Trip? trip;
  const LandmarksOverview({super.key, this.trip});

  @override
  State<LandmarksOverview> createState() => _LandmarksOverviewState();
}

class _LandmarksOverviewState extends State<LandmarksOverview> {
  // final Future<List<Landmark>> _landmarks = fetchLandmarks();

  @override
  Widget build(BuildContext context) {
    return ListenableBuilder(//<LinkedList<Landmark>>
      listenable: widget.trip!,
      builder: (BuildContext context, Widget? child) {
        Trip trip = widget.trip!;
        log("Trip ${trip.uuid} ${trip.landmarks.length} landmarks");
        List<Widget> children;
        if (trip.uuid == 'pending') {
          // the trip is still being fetched from the api
          children = [Center(child: CircularProgressIndicator())];
        } else if (trip.uuid == 'error') {
            children = [
              const Icon(
                Icons.error_outline,
                color: Colors.red,
                size: 60,
              ),
              Padding(
                padding: const EdgeInsets.only(top: 16),
                child: Text('Error: ${trip.cityName}'),
              ),
            ];
        } else {
          if (trip.landmarks.length <= 1) {
            children = [
              const Text("No landmarks in this trip"),
            ];
          } else {
            children = [
              landmarksWithSteps(trip.landmarks),
              saveButton(),
            ];
          }
        }
        return Column(
          children: children,
        );
      },
    );
  }
  Widget saveButton() => ElevatedButton(
    onPressed: () async {
      Trip? trip = await widget.trip;
      SharedPreferences prefs = await SharedPreferences.getInstance();
      trip?.toPrefs(prefs);
    },
    child: const Text('Save'),
  );

}

Widget landmarksWithSteps(LinkedList<Landmark> landmarks) {
  List<Widget> children = [];
  int lkey = 0;
  for (Landmark landmark in landmarks) {
    children.add(
      Dismissible(
        key: ValueKey<int>(lkey),
        child: LandmarkCard(landmark),
        // onDismissed: (direction) {
        //   // Remove the item from the data source.
        //   setState(() {
        //     landmarks.remove(landmark);
        //   });
        //   // Then show a snackbar.
        //   ScaffoldMessenger.of(context)
        //       .showSnackBar(SnackBar(content: Text("${landmark.name} dismissed")));
        // },
        background: Container(color: Colors.red),
        secondaryBackground: Container(
          color: Colors.red,
          child: Icon(
            Icons.delete,
            color: Colors.white,
          ),
          padding: EdgeInsets.all(15),
          alignment: Alignment.centerRight,
        ),
      )
    );
    lkey++;
    if (landmark.next != null) {
      Widget step = stepBetweenLandmarks(landmark);
      children.add(step);
    }
  }

  return Column(
    children: children
  );
}


Widget stepBetweenLandmarks(Landmark landmark) {
  // This is a simple widget that draws a line between landmark-cards
  // It's a vertical dotted line
  // Next to the line is the icon for the mode of transport (walking for now) and the estimated time
  // There is also a button to open the navigation instructions as a new intent
  return Container(
    margin: EdgeInsets.all(10),
    padding: EdgeInsets.all(10),
    decoration: BoxDecoration(
      border: Border(
        left: BorderSide(width: 3.0, color: Colors.black),
      ),
      // gradient: LinearGradient(
      //   begin: Alignment.topLeft,
      //   end: Alignment.bottomRight,
      //   colors: [Colors.grey, Colors.white, Colors.white],
      // ),
    ),
    child: Row( 
      children: [
        Column(
          children: [
            Icon(Icons.directions_walk),
            Text("${landmark.tripTime} min", style: TextStyle(fontSize: 10)),
          ],
        ),
        Spacer(),
        ElevatedButton(
          onPressed: () {
            // Open navigation instructions
          },
          child: Text("Navigate"),
        ),
      ],
    ),
  );
}