import React, { useEffect, useRef, useState } from 'react'
import L from 'leaflet'
import { hexGrid } from '@turf/turf'
import count from 'turf-count'


//highlight style
var hexStyleHighlight = {
    color: "#336",
    weight: 4,
    opacity: 1,
};

//create color ramp
function getColor(y) {
    return y === undefined ? '#888' :
        y < 1 ? '#ffffe9' :
        y < 2 ? '#ffffe9' :
        y < 5 ? '#ffffe9' :
        y < 10 ? '#ffffe9' :
        y < 20 ? '#ffffe9' :
        y < 50 ? '#ffffe9' :
        y < 100 ? '#ffffe9' :
                    '#ffffe9';
}

//create style, with fillColor picked from color ramp
function style(feature) {
    return {
        fillColor: getColor(feature.properties.pt_count),
        color: "#888",
        weight: 1,
        opacity: 1,
        fillOpacity: 0.2
    };
}
//attach styles and popups to the hex layer
function highlightHex(e) {
    var layer = e.target;
    layer.setStyle(hexStyleHighlight);
    if (!L.Browser.ie && !L.Browser.opera) {
        layer.bringToFront();
    }
}

function resetHexHighlight(e) {
    var layer = e.target;
    var hexStyleDefault=style(layer.feature);
    layer.setStyle(hexStyleDefault);
}

function onEachHex(feature, layer) {
    layer.on({
        mouseover: highlightHex,
        mouseout: resetHexHighlight
    });
    var hexStyleDefault=style(layer.feature);
    layer.setStyle(hexStyleDefault);

}

// /cheapo normrand function
function normish(mean, range) {
    var num_out = ((Math.random() + Math.random() + Math.random() + Math.random() + Math.random() + Math.random() + Math.random() + Math.random() - 4) / 4) * range + mean;
    return num_out;
}

//create geojson data with random ~normal distribution
function make_dots(dotcount) {

    var dots = {
        type: "FeatureCollection",
        features: []
    };

    for(var i=0;i<dotcount;++i) {

    //set up random variables
    const x = normish(0, 4);
    const y = normish(0, 4);

    // set center coordinates
    var centerlat = 50.798753;
    var centerlon = -1.108770;

    //create points randomly distributed about center coordinates
    var g = {
        "type": "Point",
            "coordinates": [((x * 0.11) + centerlon), ((y * 0.1) + centerlat)]
    };

    //create feature properties, roughly proportional to distance from center coordinates
    var p = {
        "id": i,
            "popup": "Dot_" + i,
            "year": parseInt(Math.sqrt(x * x + y * y) * 60 * (1 - Math.random() / 1.5) + 1900),
            "size": Math.round((parseFloat(Math.abs((normish(y*y, 2) + normish(x*x, 2)) * 50) + 10)) * 100) / 100
    };

        //create features with proper geojson structure
        dots.features.push({
            "geometry" : g,
            "type": "Feature",
            "properties": p
        });
    }
    return dots;
}

function Map() {

  const [markerPosition] =  useState({ lat:50.798753, lng:-1.108770  })

  //create some GeoJSON points to be sampled (function below)
    var dotcount = 10000;
    var dots = make_dots(dotcount);

    //parameters for hex grid
    const bbox = [-3.3883,49.9624,1.1478,51.7974];
    const cellWidth = 0.5;
    const units = 'miles';


    //create hex grid and count points within each cell
    const hexgrid = hexGrid(bbox, cellWidth, {
        units
    });
    const hexcounts = count(hexgrid, dots, 'pt_count');



  const mapRef = useRef(null)
    useEffect(() => {

        mapRef.current = L.map('map', {
            center: markerPosition,
            zoom: 18,
            layers: [
                L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
                    attribution:
                        '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                })
            ]
        })
    }, [markerPosition])


    const markerRef = useRef(null)
    const customIcon = L.icon({
        iconUrl: './boat-marker.svg',
        iconSize: [80,80],
        iconAnchor: [17,46]
    });

    useEffect(() => {
        if(markerRef.current)
            markerRef.current.setLatLng(markerPosition)
        else
            markerRef.current = L.marker(markerPosition, {icon:customIcon, draggable: true }).addTo(mapRef.current).bindPopup('HMS Warrior')
    }, [markerPosition, customIcon])

    const geoJsonRef = useRef(null)
    useEffect(() => {
        L.geoJson(hexcounts, {onEachFeature: onEachHex}).addTo(mapRef.current);

        if(geoJsonRef.currrent != null) {
            geoJsonRef.current.clearLayers()
        }
    },[hexcounts])

    return <div id='map' style={{ width: '80%', height: '1000px' }}></div>
}

export default Map