/* global L */
/* eslint-disable import/no-absolute-path */
/* eslint-disable react/jsx-indent-props */
/* eslint-disable react/jsx-indent */
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { ButtonGroup, Row, Col } from 'react-bootstrap';
import { Meteor } from 'meteor/meteor';
import { withTracker } from 'meteor/react-meteor-data';
import { Trans, translate } from 'react-i18next';
import { Map } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css';
import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js';
import 'leaflet-sleep/Leaflet.Sleep.js';
import Control from 'react-leaflet-control';
import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition';
import subsUnion from '/imports/ui/components/Maps/SubsUnion/SubsUnion';
import DefMapLayers from '/imports/ui/components/Maps/DefMapLayers';
import Loading from '/imports/ui/components/Loading/Loading';
import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions';

import './SubscriptionsMap.scss';

// Remove map in subscription
class SubscriptionsMap extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      viewport: {
        center: [0, 0],
        zoom: 0
      },
      init: true
    };
  }

  componentDidMount() {
    if (this.subscriptionsMap) {
      this.addScale();
    }
  }

  getMap() {
    return this.subscriptionsMap.leafletElement;
  }

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

  handleLeafletLoad(map) {
    // console.log('Map loading');
    // console.log(map);
    if (map) {
      this.state.union = subsUnion(this.state.union, {
        map,
        subs: this.props.userSubs,
        show: true,
        fit: this.state.init
      });
    }
  }

  centerOnUserLocation(viewport) {
    console.log(`viewport: ${JSON.stringify(viewport)}`);
    this.setState({ init: false, viewport });
  }

  render() {
    console.log(`Rendering Subs users ready ${this.props.subsready} subs: ${this.props.userSubs.length} viewport: ${JSON.stringify(this.state.viewport)}`);
    return (
      <Fragment>
        {!this.props.subsready ?
         <Row className="align-items-center justify-content-center">
           <Loading />
         </Row>
         : ''}
         <h4 className="page-header"><Trans parent="span">Zonas vigiladas</Trans></h4>
         <Col xs={12} sm={12} md={12} lg={12}>
           <Row>
             <Trans>En verde, las zonas vigiladas por nuestros usuari@s actualmente. ¡Participa!</Trans>&nbsp;(*)
           </Row>
         </Col>
         <Map
             ref={(map) => {
                 this.subscriptionsMap = map;
                 this.handleLeafletLoad(map);
               }}
             zoom={this.state.viewport.zoom}
             center={this.state.viewport.center}
             className="subscriptionsmap-leaflet-container"
             animate
             sleep={window.location.pathname === '/'}
             sleepTime={10750}
             wakeTime={750}
             sleepNote
             hoverToWake={false}
             wakeMessage={this.props.t('Pulsa para activar')}
             wakeMessageTouch={this.props.t('Pulsa para activar')}
             sleepOpacity={0.6}
         >
           <DefMapLayers />
           <Control position="topright" >
             <ButtonGroup>
               <CenterInMyPosition onClick={viewport => this.centerOnUserLocation(viewport)} {... this.props} />
             </ButtonGroup>
           </Control>
         </Map>

         <Row>
           <Col xs={12} sm={12} md={12} lg={12}>
             <p className="subscriptionsmap-footnote"><span style={{ paddingRight: '5px' }}>(*)</span><Trans i18nKey="mapPrivacy" parent="span"><em>Para preservar la privacidad de nuestros usuarios/as, los datos reflejados están aleatoriamente alterados y son solo orientativos.</em></Trans></p>
           </Col>
         </Row>
      </Fragment>
    );
  }
}

SubscriptionsMap.propTypes = {
  subsready: PropTypes.bool.isRequired,
  userSubs: PropTypes.arrayOf(PropTypes.object).isRequired,
  t: PropTypes.func.isRequired
};

export default translate([], { wait: true })(withTracker(() => {
  const userSubs = Meteor.subscribe('userSubsToFires');
  return {
    userSubs: UserSubsToFiresCollection.find().fetch(),
    subsready: userSubs.ready()
  };
})(SubscriptionsMap));