todos-contra-el-fuego-web/imports/ui/components/SelectionMap/SelectionMap.js

/* global setTimeout */
/* eslint-disable react/jsx-indent-props */
/* eslint-disable react/jsx-indent */
/* eslint-disable import/no-absolute-path */
/* eslint-disable import/no-absolute-path */

import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import { Meteor } from 'meteor/meteor';
import { MapContainer, Marker, CircleMarker, Circle, Tooltip } from 'react-leaflet';
import Leaflet from 'leaflet';
import { withTranslation } from 'react-i18next';
import { withTracker } from 'meteor/react-meteor-data';
import update from 'immutability-helper';
import geolocation from '/imports/startup/client/geolocation';
import { positionIcon, removeIcon } from '/imports/ui/components/Maps/Icons';
import DefMapLayers from '/imports/ui/components/Maps/DefMapLayers';
import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css';
import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js';
import 'leaflet-sleep/Leaflet.Sleep.js';
import MapControl from '/imports/ui/components/Maps/MapControl';
import { MapReady, MapEvents } from '/imports/ui/components/Maps/MapBridge';
import { Row, Col, Button, ButtonGroup } from 'react-bootstrap';
import subsUnion from '/imports/ui/components/Maps/SubsUnion/SubsUnion';
import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions';
import { isChrome } from '/imports/ui/components/Utils/isMobile';
import FullScreenMap from '/imports/ui/components/Maps/FullScreenMap';

import './SelectionMap.scss';

export const action = {
  view: 0,
  add: 1,
  edit: 2
};

class SelectionMap extends Component {
  constructor(props) {
    super(props);
    this.state = {
      center: props.center,
      marker: props.center,
      zoom: props.zoom || 11,
      distance: props.distance,
      draggable: true,
      subsFit: this.props.action !== action.add
    };

    this.getMap = this.getMap.bind(this);
    this.toggleDraggable = this.toggleDraggable.bind(this);
    this.updatePosition = this.updatePosition.bind(this);
    this.fit = this.fit.bind(this);
    this.addScale = this.addScale.bind(this);
    this.onFstBtn = this.onFstBtn.bind(this);
    this.onMapMove = this.onMapMove.bind(this);
    this.handleMapReady = this.handleMapReady.bind(this);
  }

  // v4: MapReady hands us the ready Leaflet map (replaces the componentDidMount
  // + ref/.leafletElement wiring)
  handleMapReady(map) {
    this.map = map;
    if (this.isValidState()) this.addScale();
    this.handleLeafletLoad(map);
  }

  // Was UNSAFE_componentWillReceiveProps: pull center/distance from props into
  // state when they actually change. Done in componentDidUpdate (not
  // getDerivedStateFromProps) because the marker is also locally draggable, so
  // we must guard on a real value change to avoid clobbering a drag / looping.
  componentDidUpdate(prevProps) {
    const { center, distance } = this.props;
    const centerChanged = center[0] &&
      (center[0] !== this.state.center[0] || center[1] !== this.state.center[1]);
    const distanceChanged = distance && distance !== this.state.distance;
    if (centerChanged || distanceChanged) {
      this.setState({
        center: center[0] ? center : this.state.center,
        marker: center[0] ? center : this.state.marker,
        distance: distance || this.state.distance
      });
      // v4 map is uncontrolled: move it imperatively on a real center change
      if (centerChanged && this.map) this.map.setView(center, this.state.zoom);
    }
    this.fit();
  }

  onFstBtn() {
    this.props.onFstBtn({
      location: { lat: this.state.marker[0], lon: this.state.marker[1] },
      distance: this.state.distance
    });
  }

  onSndBtn() {
    this.props.onSndBtn();
  }

  // v4: fed by <MapEvents> on moveend/zoomend (was the v1 onViewportChanged prop)
  onMapMove() {
    if (!this.map) return;
    const c = this.map.getCenter();
    const viewport = { center: [c.lat, c.lng], zoom: this.map.getZoom() };
    if (this.props.onViewportChanged) {
      this.props.onViewportChanged(viewport);
    }
    this.state.subsFit = false;
    this.state.center = viewport.center;
    this.state.zoom = viewport.zoom;
  }

  getMap() {
    return this.map;
  }

  toggleDraggable() {
    this.setState({ draggable: !this.state.draggable });
  }

  updatePosition() {
    const { lat, lng } = this.marker.getLatLng();
    // console.log(`New marker lat ${lat} and lng ${lng}`);
    const currentDistance = this.state.distance;
    this.setState(update(this.state, { $merge: { marker: [lat, lng] } }));
    if (this.props.onSelection) {
      this.props.onSelection({ lat, lng, currentDistance });
    }
    this.fit();
  }

  fit() {
    // console.log("fit!");
    if (this.props.currentSubs.length > 0 && this.state.subsFit && this.props.action !== action.add) {
      // has autofit, do nothing
    } else if (this.map && this.distanceCircle) {
      if (!this.getMap().getBounds().contains(this.distanceCircle.getBounds())) {
        // console.log('New area circle not visible');
        this.getMap().fitBounds(this.distanceCircle.getBounds()); // padding , [70, 70]);
      } else {
        // console.log('New area circle visible');
      }
    }
  }

  addScale() {
    if (this.map) {
      // https://www.npmjs.com/package/leaflet-graphicscale
      const map = this.getMap();
      const options = {
        fill: 'fill',
        showSubunits: true
      };
      // var graphicScale =
      Leaflet.control.graphicScale([options]).addTo(map);
    }
  }

  isValidState() {
    return !this.props.loadingSubs && this.state.center && this.state.center[0];
  }

  handleLeafletLoad(map) {
    if (this.props.currentSubs && map && !this.props.loadingSubs) {
      const subsOpts = {
        map,
        show: true,
        fit: this.state.subsFit,
        subs: this.props.currentSubs
      };
      if (this.props.action === action.add) {
        subsOpts.color = 'gray';
      }
      this.state.union = subsUnion(this.state.union, subsOpts);
    }
  }

  render() {
    const { t, onRemove } = this.props;
    return (
      this.isValidState() ?
      <Row>
        <Col xs={12} sm={12} md={12} lg={12}>
          <MapContainer
              zoom={this.state.zoom}
              center={this.state.center}
              className="selectionmap-leaflet-container"
              sleep={window.location.pathname === '/' && !isChrome}
              sleepTime={10750}
              wakeTime={750}
              sleepNote
              hoverToWake={false}
              wakeMessage={t('Pulsa para activar')}
              wakeMessageTouch={t('Pulsa para activar')}
              sleepOpacity={0.6}
          >
            <MapReady onReady={this.handleMapReady} />
            <MapEvents handlers={{ moveend: this.onMapMove, zoomend: this.onMapMove }} />
            <DefMapLayers osmcolor />
            {this.props.action === action.edit &&
             this.props.currentSubs.map((subs, index) => (
               <Marker
                   key={subs._id}
                   draggable={false}
                   position={[subs.location.lat, subs.location.lon]}
                   icon={removeIcon}
                   title={t('Pulsa para borrar')}
                   eventHandlers={{ click: () => { onRemove(subs._id); } }}
               >
                 {index === 0 &&
                  <Tooltip
                      permanent
                      direction="right"
                      /* Use .openTooltip(); in the future */
                      offset={[10, -10]}
                  >
                    <span>{t('Pulsa aquí para borrar la zona')}</span>
                  </Tooltip>
                 }
               </Marker>
             ))
            }
               {this.props.action === action.add &&
                <Fragment>
                  <Marker
                      draggable={this.state.draggable}
                      eventHandlers={{ dragend: this.updatePosition }}
                      position={this.state.marker}
                      icon={positionIcon}
                      title={t('Arrastrar para seleccionar otro punto')}
                      ref={(ref) => { this.marker = ref; }}
                  />
                  <CircleMarker
                      center={this.state.marker}
                      radius={3}
                      pathOptions={{ color: 'red', stroke: false, fillOpacity: 1, fill: true }}
                  />
                  <Circle
                      center={this.state.marker}
                      ref={(ref) => { this.distanceCircle = ref; }}
                      pathOptions={{ color: '#145A32', fillColor: 'green', fillOpacity: 0.1 }}
                      radius={this.state.distance * 1000}
                  />
                </Fragment>
               }
                <MapControl position="topright" >
                  <ButtonGroup>
                    { this.props.sndBtn && this.props.onSndBtn &&
                      <Button
                          variant="warning"
                          title={this.props.sndBtnTitle}
                          onClick={event => this.onSndBtn(event)}
                      >
                        {this.props.sndBtn.match(/^fa-/) ? <i className={`fa ${this.props.sndBtn}`} /> : this.props.sndBtn }
                      </Button>
                    }
                      <Button
                          variant="success"
                          disabled={this.props.disableFstBtn}
                          onClick={event => this.onFstBtn(event)}
                      >
                        {this.props.fstBtn}
                      </Button>
                  </ButtonGroup>
                </MapControl>
                <FullScreenMap />
          </MapContainer>
        </Col>
      </Row>
        :
      <div />);
  }
}

SelectionMap.defaultProps = {
  zoom: 11,
  sndBtnTitle: ''
};

SelectionMap.propTypes = {
  t: PropTypes.func.isRequired,
  center: PropTypes.arrayOf(PropTypes.number),
  zoom: PropTypes.number,
  distance: PropTypes.number,
  onSelection: PropTypes.func,
  onViewportChanged: PropTypes.func,
  fstBtn: PropTypes.string.isRequired,
  onFstBtn: PropTypes.func.isRequired,
  sndBtn: PropTypes.string,
  onSndBtn: PropTypes.func,
  sndBtnTitle: PropTypes.string,
  onRemove: PropTypes.func,
  action: PropTypes.number.isRequired,
  loadingSubs: PropTypes.bool.isRequired,
  disableFstBtn: PropTypes.bool.isRequired,
  currentSubs: PropTypes.arrayOf(PropTypes.shape({
    location: PropTypes.shape({ latitude: PropTypes.number, longitude: PropTypes.number }).isRequired,
    distance: PropTypes.number.isRequired
  }))
};

export default withTranslation()(withTracker((props) => {
  const subscription = Meteor.subscribe('mysubscriptions');
  // console.log(props.loadingSubs);
  return {
    center: props.center[0] !== null ? props.center : geolocation.get(),
    distance: props.distance,
    loadingSubs: !subscription.ready(),
    currentSubs: UserSubsToFiresCollection.find({ owner: Meteor.userId() }).fetch() // type: 'web'
  };
})(SelectionMap));