import React from "react";
import { Map as LeafletMap, TileLayer, Marker, Popup } from "react-leaflet";
import L from "leaflet";
import {
  ComposedChart,
  Bar,
  Area,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend
} from "recharts";
import "./App.css";

const customMarker = new L.Icon({
  iconUrl:
    "https://unpkg.com/browse/leaflet@1.5.1/dist/images/marker-shadow.png",
  iconSize: [25, 41],
  iconAnchor: [10, 41],
  popupAnchor: [2, -40]
});

class Map extends React.Component {
  state = {
    date: new Date()
  };

  constructor() {
    super();
    this.state = {
      coords: [
        { lat: 41.19197, lng: 25.33719 },
        { lat: 41.26352, lng: 25.1471 }
      ],
      zoom: 8,
      minZoom: 7,
      maxZoom: 9,
      dats: null,
      loading: true,
      dataAPI: null,
      temp: null
    };
    this.getURL = this.getURL.bind(this);
    this.loadData = this.loadData.bind(this);
  }

  getURL = id =>
    `http://192.168.0.1:8000/?date=2019-10-20&id=${id}&daysForward=2`;

  loadData = async id => {
    const response = await fetch(this.getURL(id));
    const data = await response.json();
    return data.aladinModel[0];
  };

  render() {
    const { coords, zoom } = this.state;
    return (
      <LeafletMap
        center={[42.733883, 25.48583]}
        zoom={zoom}
        minZoom={this.state.minZoom}
        maxZoom={this.state.maxZoom}
        style={{ height: "100vh", width: "100vw" }}
      >
        <TileLayer
          attribution='&copy; <a href="http://plovdiv.meteo.bg">НИМХ - Пловдив</a> '
          url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
        />

        {coords.map(({ lat, lng }, index) => {
          let charData = this.loadData(index + 1);
          return (
            <Marker position={[lat, lng]} icon={customMarker} key={index}>
              <div className="leaflet-popup-content">
                <Popup maxWidth="1000" maxHeight="auto">
                  <div className="chart">
                    <br />
                    <br />
                    Температура °C
                    <ComposedChart
                      width={400}
                      height={200}
                      data={charData}
                      margin={{
                        top: 20,
                        right: 0,
                        left: 0,
                        bottom: 20
                      }}
                    >
                      <CartesianGrid stroke="#f5f5f5" />
                      <XAxis dataKey="DATS" />
                      <YAxis />
                      <Tooltip />
                      <Legend />
                      <Line
                        type="monotone"
                        dataKey="TA"
                        fill="#f70000"
                        stroke="#f56200"
                      />
                    </ComposedChart>
                  </div>
                  {index + 1} is for popup with lat: {lat} and lon {lng}
                </Popup>
              </div>
            </Marker>
          );
        })}
      </LeafletMap>
    );
  }
}

export default Map;