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: Row(
      children: [
        SizedBox(
          width: 300,
          child: Sidebar(model),
        ),
        Expanded(
          child: Card(
            child: Column(
              children: [
                LatLongEditor(
                  latitudeController: model.startLatitudeController,
                  longitudeController: model.startLongitudeController,
                  label: "Start at",
                  isShowingMarkers: model.markerState == MarkerState.start,
                  showMarkers: () => model.showMarkers(MarkerState.start),
                  hideMarkers: model.hideMarkers,
                ),
                const SizedBox(height: 12),
                LatLongEditor(
                  latitudeController: model.endLatitudeController,
                  longitudeController: model.endLongitudeController,
                  label: "End at",
                  isShowingMarkers: model.markerState == MarkerState.end,
                  showMarkers: () => model.showMarkers(MarkerState.end),
                  hideMarkers: model.hideMarkers,
                ),
                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}",
                  ),
                Expanded(
                  child: model.isGoogleReady
                    ? GoogleMap(
                      onMapCreated: (controller) => model.mapController = controller,
                      initialCameraPosition: const CameraPosition(
                        target: LatLng(42.10125081757972, -75.94181323552698),
                        zoom: 14,
                      ),
                      markers: model.markers,
                      onTap: model.onMapTapped,
                      polylines: {
                        for (final (index, route) in model.routes.indexed) Polyline(
                          polylineId: PolylineId(index.toString()),
                          color: routeColors[index],
                          points: route,
                        ),
                      },
                    )
                    : const Center(child: CircularProgressIndicator()),
                ),
              ],
            ),
          ),
        ),
      ],
    ),
  );
}

const routeColors = [Colors.blue, Colors.red, Colors.green, Colors.yellow, Colors.orange];
