import "package:client/data.dart";
import "package:flutter/material.dart" hide Route;
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: 325,
          child: Sidebar(model),
        ),
        Expanded(
          child: Card(
            child: Column(
              children: [
                SwitchListTile(
                  value: model.markerState == MarkerState.override,
                  onChanged: model.overrideMarkers,
                  title: const Text("Show stops list"),
                  subtitle: const Text("To select a start or end stop, use the buttons below"),
                ),
                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(),
                if (model.errorText != null)
                  Text(model.errorText!),
                Expanded(
                  child: model.isGoogleReady
                    ? GoogleMap(
                      onMapCreated: (controller) => model.mapController = controller,
                      onTap: model.onMapTapped,
                      initialCameraPosition: const CameraPosition(
                        target: LatLng(42.10125081757972, -75.94181323552698),
                        zoom: 14,
                      ),
                      markers: {
                        ...model.markers,
                        for (final (stop, reason) in model.pathWaypoint) Marker(
                          markerId: MarkerId(stop.id.id),
                          position: stop.coordinates.toLatLng(),
                          infoWindow: InfoWindow(
                            title: reason,
                            snippet: stop.description,
                          ),
                        ),
                      },
                      circles: {
                        for (final route in model.pathStops)
                          for (final stop in route) Circle(
                            circleId: CircleId(stop.hashCode.toString()),
                            center: stop.toLatLng(),
                            fillColor: Colors.white,
                            zIndex: 1,
                            radius: 2,
                          ),
                      },
                      polylines: {
                        for (final (index, route) in model.pathStops.indexed) Polyline(
                          polylineId: PolylineId(index.toString()),
                          color: routeColors[index],
                          jointType: JointType.round,
                          points: [
                            for (final stop in route)
                              stop.toLatLng(),
                          ],
                        ),
                        for (final (index, walkingPath) in model.pathWalking.indexed) Polyline(
                          polylineId: PolylineId((model.pathStops.length + index).toString()),
                          jointType: JointType.round,
                          width: 8,
                          patterns: List.filled(20, PatternItem.gap(3)),
                          points: [
                            for (final step in walkingPath)
                              step.toLatLng(),
                          ],
                        ),
                      },
                    )
                    : const Center(child: CircularProgressIndicator()),
                ),
              ],
            ),
          ),
        ),
      ],
    ),
  );
}

final routeColors = [Colors.red, Colors.orange, Colors.amber, Colors.green, Colors.blue, Colors.deepPurple, Colors.grey, Colors.pink, Colors.teal, ...List.filled(10, Colors.black)];
