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) => (
          <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={this.loadData(index+1)}
                    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;