import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:latlong2/latlong.dart';
import 'package:redux/src/store.dart';

import 'colors.dart';
import 'compassMapPlugin.dart';
import 'customBottomAppBar.dart';
import 'generated/i18n.dart';
import 'mainDrawer.dart';
import 'models/appState.dart';

@immutable
class _ViewModel {
  _ViewModel(this.monitoredAreas);
  List<Polyline> monitoredAreas;

  @override
  bool operator ==(Object other) =>
      identical(this, other) ||
      other is _ViewModel &&
          runtimeType == other.runtimeType &&
          monitoredAreas == other.monitoredAreas;

  @override
  int get hashCode => monitoredAreas.hashCode;
}

class MonitoredAreasPage extends StatelessWidget {
  const MonitoredAreasPage({super.key});

  static const String routeName = 'monitoredAreasMap';

  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, _ViewModel>(
        distinct: true,
        converter: (Store<AppState> store) {
          return _ViewModel(store.state.monitoredAreas);
        },
        builder: (BuildContext context, _ViewModel view) {
          return Scaffold(
            appBar: AppBar(title: Text(S.of(context).monitoredAreasTitle)),
            drawer: MainDrawer(context, MonitoredAreasPage.routeName),
            bottomNavigationBar: CustomBottomAppBar(
                fabLocation: FloatingActionButtonLocation.centerDocked,
                showNotch: true,
                color: fires100,
                actions: <Widget>[
                  Flexible(
                      child: Padding(
                          padding:
                              const EdgeInsets.only(left: 10.0, right: 10.0),
                          child: Column(
                              mainAxisSize: MainAxisSize.min,
                              children: <Widget>[
                                Text(S.of(context).mapPrivacy,
                                    style: const TextStyle(
                                        fontStyle: FontStyle.italic,
                                        color: Colors.black38))
                              ])))
                ]),
            body: Padding(
              padding: const EdgeInsets.all(10.0),
              child: Column(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(top: 8.0, bottom: 8.0),
                    child: Text(S.of(context).inGreenMonitoredAreas),
                  ),
                  Flexible(
                    child: FlutterMap(
                      options: const MapOptions(
                        initialCenter: LatLng(53.5775, 3.106111),
                        initialZoom: 1.0,
                      ),
                      children: <Widget>[
                        TileLayer(
                            urlTemplate:
                                'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',
                            subdomains: const <String>['a', 'b', 'c', 'd'],
                            userAgentPackageName: 'com.example.fires_flutter'),
                        const CompassMapPluginWidget(),
                        PolylineLayer(
                          polylines: view.monitoredAreas,
                        )
                      ],
                    ),
                  ),
                ],
              ),
            ),
          );
        });
  }
}