import 'package:fast_network_navigation/modules/landmark_card.dart';
import 'package:fast_network_navigation/structs/landmark.dart';
import 'package:fast_network_navigation/utils/get_landmarks.dart';
import 'package:flutter/material.dart';




class loadLandmarksOverview extends StatefulWidget {
  const loadLandmarksOverview({super.key});

  @override
  State<loadLandmarksOverview> createState() => _loadLandmarksOverviewState();
}

class _loadLandmarksOverviewState extends State<loadLandmarksOverview> {
  final Future<List<Landmark>> _landmarks = fetchLandmarks();

  @override
  Widget build(BuildContext context) {
    return DefaultTextStyle(
      style: Theme.of(context).textTheme.displayMedium!,
      textAlign: TextAlign.center,
      child: FutureBuilder<List<Landmark>>(
        future: _landmarks,
        builder: (BuildContext context, AsyncSnapshot<List<Landmark>> snapshot) {
          List<Widget> children;
          if (snapshot.hasData) {
            children = [landmarksWithSteps(snapshot.data!)];
          } else if (snapshot.hasError) {
            children = <Widget>[
              const Icon(
                Icons.error_outline,
                color: Colors.red,
                size: 60,
              ),
              Padding(
                padding: const EdgeInsets.only(top: 16),
                child: Text('Error: ${snapshot.error}'),
              ),
            ];
          } else {
            children = [Center(child: CircularProgressIndicator())];
          }
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: children,
            ),
          );
        },
      ),
    );
  }
}

Widget landmarksWithSteps(List<Landmark> landmarks) {
  List<Widget> children = [];
  for (Landmark landmark in landmarks) {
    children.add(LandmarkCard(landmark));
    children.add(stepBetweenLandmarks());
  }

  return Column(
    children: children.sublist(0, children.length - 1)
  );
}


Widget stepBetweenLandmarks() {
  // 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 Row(
    children: [
      Container(
        width: 50,
        height: 50,
        decoration: BoxDecoration(
          border: Border(
            left: BorderSide(width: 1.0, color: Colors.black),
          ),
        ),
        child: Column(
          children: [
            Icon(Icons.directions_walk),
            Text("5 min", style: TextStyle(fontSize: 10)),
          ],
        ),
      ),
      Spacer(),
      ElevatedButton(
        onPressed: () {
          // Open navigation instructions
        },
        child: Text("Navigate"),
      ),
    ],
  );
}