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 Padding(
            padding: const EdgeInsets.all(10),
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: children,
              ),
            ),
          );
        },
      ),
    );
  }
}

Widget landmarksWithSteps(List<Landmark> landmarks) {
  List<Widget> children = [];
  for (int i = 0; i < landmarks.length; i++) {
    children.add(LandmarkCard(landmarks[i]));
    if (i < landmarks.length - 1) {
      Widget step = stepBetweenLandmarks(landmarks[i], landmarks[i + 1]);
      children.add(step);
    }
  }

  return Column(
    children: children
  );
}


Widget stepBetweenLandmarks(Landmark before, Landmark after) {
  // 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("5 min", style: TextStyle(fontSize: 10)),
          ],
        ),
        Spacer(),
        ElevatedButton(
          onPressed: () {
            // Open navigation instructions
          },
          child: Text("Navigate"),
        ),
      ],
    ),
  );
}