import 'package:comunes_flutter/comunes_flutter.dart';
import 'package:flutter/material.dart';
import 'package:get_it/get_it.dart';
import 'package:redux/redux.dart';

import 'models/appState.dart';
import 'redux/fireMapActions.dart';

/// Layer selector widget for changing map layers
class LayerSelectorMapPluginWidget extends StatelessWidget {
  const LayerSelectorMapPluginWidget({super.key});

  @override
  Widget build(BuildContext context) {
    final Store<AppState> store = GetIt.instance<Store<AppState>>();
    return LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) =>
            Stack(fit: StackFit.expand, children: <Widget>[
              Positioned(
                top: constraints.maxHeight - 60,
                left: 10.0,
                child: CenteredRow(
                  children: <Widget>[
                    Column(
                      children: <Widget>[_LayerSelectorButton(store)],
                    )
                  ],
                ),
              )
            ]));
  }

  Widget _LayerSelectorButton(Store<AppState> store) {
    final GlobalKey<PopupMenuButtonState<FireMapLayer>> key = GlobalKey<PopupMenuButtonState<FireMapLayer>>();

    return PopupMenuButton<FireMapLayer>(
      key: key,
      initialValue: store.state.fireMapState.layer,
      onSelected: (FireMapLayer layer) {
        store.dispatch(SelectMapLayerAction(layer));
      },
      itemBuilder: (BuildContext context) {
        return FireMapLayer.values.map((FireMapLayer layer) {
          final bool isSelected = store.state.fireMapState.layer == layer;
          return PopupMenuItem<FireMapLayer>(
            value: layer,
            child: Row(
              children: <Widget>[
                Icon(
                  isSelected ? Icons.check : Icons.check,
                  color: isSelected ? Colors.blue : Colors.transparent,
                  size: 20,
                ),
                const SizedBox(width: 8),
                Text(
                  _getLayerName(layer),
                  style: TextStyle(
                    fontWeight:
                        isSelected ? FontWeight.bold : FontWeight.normal,
                  ),
                ),
              ],
            ),
          );
        }).toList();
      },
      child: FloatingActionButton(
        backgroundColor: Colors.black26,
        mini: true,
        child: const Icon(Icons.layers),
        onPressed: () {
          key.currentState?.showButtonMenu();
        },
      ),
    );
  }

  String _getLayerName(FireMapLayer layer) {
    switch (layer) {
      case FireMapLayer.osmcGrey:
        return 'OSMC Grey';
      case FireMapLayer.osmc:
        return 'OSMC';
      case FireMapLayer.esri:
        return 'Esri Street';
      case FireMapLayer.esriSatellite:
        return 'Esri Satellite';
      case FireMapLayer.esriTerrain:
        return 'Esri Terrain';
    }
  }
}