import "package:client/data.dart";
import "package:flutter/material.dart";
import "package:google_maps_flutter/google_maps_flutter.dart";

import "package:client/view_models.dart";
import "package:client/widgets.dart";

/// The home page.
class HomePage extends ReactiveWidget<HomeModel> {
  @override
  HomeModel createModel() => HomeModel();

  @override
  Widget build(BuildContext context, HomeModel model) => Scaffold(
    appBar: AppBar(title: const Text("Counter")),
    body: Center(
      child: SizedBox(
        width: 300,
        child: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: model.startLatitudeController,
                    decoration: const InputDecoration(
                      hintText: "Start latitude",
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                const SizedBox(width: 8),
                Expanded(
                  child: TextField(
                    controller: model.startLongitudeController,
                    decoration: const InputDecoration(
                      hintText: "Start longitude",
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
              ],
            ),
            const SizedBox(height: 12),
            Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: model.endLatitudeController,
                    decoration: const InputDecoration(
                      hintText: "End latitude",
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
                const SizedBox(width: 8),
                Expanded(
                  child: TextField(
                    controller: model.endLongitudeController,
                    decoration: const InputDecoration(
                      hintText: "End Longitude",
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
              ],
            ),
            const SizedBox(height: 24),
            FilledButton(onPressed: model.search, child: const Text("Search for a path")),
            const SizedBox(height: 8),
            const Divider(),
            const SizedBox(height: 8),
            if (model.isLoading)
              const LinearProgressIndicator()
            else if (model.isSearching && model.path == null)
              const Text("Could not connect to API")
            else
              for (final step in model.path ?? <PathStep>[]) Text(
                "Get on at ${step.enter.lat}, ${step.enter.long}\n"
                "Get off at ${step.exit.lat}, ${step.exit.long}",
              ),
            SizedBox(
              width: 300,
              height: 300,
              child: model.isGoogleReady
                ? const GoogleMap(
                  initialCameraPosition: CameraPosition(
                    target: LatLng(42.10125081757972, -75.94181323552698),
                    zoom: 14,
                  ),
                )
                : const Center(child: CircularProgressIndicator()),
            ),
          ],
        ),
      ),
    ),
  );
}
