import React, { useState, useRef, useMemo } from "react";

import {
  MapContainer,
  TileLayer,
  FeatureGroup,
  Rectangle,
  useMap,
  Popup,
  Marker,
  LayerGroup,
  ZoomControl,
  ScaleControl,
} from "react-leaflet";

import "leaflet/dist/leaflet.css";
import "leaflet-draw/dist/leaflet.draw.css";

import { EditControl } from "react-leaflet-draw";

import "leaflet-draw";
import "./index.scss";

import grid from "../../assets/images/grid.png";

import placeholder from "./placeholder.png";

import * as L from "leaflet";

const bedNumb = "تخت شماره 33";

// const pinMB = L.icon({
//   iconUrl: placeholder,
//   iconSize: [24, 41],
//   iconAnchor: [0, 44],
//   popupAnchor: [12, -40],
//   shadowUrl: null,
//   shadowSize: null,
//   shadowAnchor: null,
// });

// const MyCustomMarker = L.icon({
//   iconUrl: placeholder,
//   iconSize: [24, 41],
//   iconAnchor: [0, 44],
//   popupAnchor: [12, -40],
//   shadowUrl: null,
//   shadowSize: null,
//   shadowAnchor: null,
// });

L.Icon.Default();

L.drawLocal = {
  draw: {
    toolbar: {
      actions: {
        title: "لغو کردن رسم",
        text: "لغو",
      },
      finish: {
        title: "پایان رسم",
        text: "پایان رسم",
      },
      undo: {
        title: "پاک کردن آخرین نقطه رسم شده",
        text: "پاک کردن آخرین نقطه رسم شده",
      },
      buttons: {
        polyline: "موکب مورد نظر خود را رسم نمایید",
        polygon: "رسم پولیگان",
        rectangle: "رسم جای خواب",
        circle: "رسم دایره",
        marker: "رسم مارکر",
        circlemarker: "رسم دایره مارکر",
      },
    },
    handlers: {
      circle: {
        tooltip: {
          start: "کلیک کنید و سپس درگ کنید تا یک دایره بکشید.",
        },
        radius: "ردیوس",
      },
      circlemarker: {
        tooltip: {
          start: "با کلیک بر روی نقشه یک مارکر رسم کنید.",
        },
      },
      marker: {
        // icon: MyCustomMarker,
        tooltip: {
          start: "با کلیک بر روی نقشه یک مارکر رسم کنید.",
        },
      },
      polygon: {
        tooltip: {
          start: "یک شکل رسم کنید.",
          cont: "ادامه رسم شکل.",
          end: "برای پایان رسم بر روی اولین نقظه کلیک کنید.",
        },
      },
      polyline: {
        error: "<strong>Error:</strong> shape edges cannot cross!",
        tooltip: {
          start: "با کلیک کردن یک خط رسم کنید.",
          cont: "با کلیک به رسم خود ادامه دهید.",
          end: "برای پایان رسم بر روی آخرین نقظ رسم شده کلیک کنید.",
        },
      },
      rectangle: {
        tooltip: {
          start: "با کلیک و درگ کردن یک جای خواب رسم کنید.",
        },
      },
      simpleshape: {
        tooltip: {
          end: "ماوس را رها کنید تا رسم تمام شود.",
        },
      },
    },
  },
  edit: {
    toolbar: {
      actions: {
        save: {
          title: "ذخیره تنظیمات",
          text: "ذخیره",
        },
        cancel: {
          title: "لغو کردن، ویرایش تمام تغییرات نادیده گرفته خواهند شد",
          text: "لغو",
        },
        clearAll: {
          title: "پاک کردن تمام لایه ها",
          text: "پاک کردن لایه ها",
        },
      },
      buttons: {
        edit: "ویرایش لایه ها",
        editDisabled: "لایه ای برای ویرایش وجود ندارد",
        remove: "پاک کردن لایه ها",
        removeDisabled: "لایه ای برای پاک کردن وجود ندارد",
      },
    },
    handlers: {
      edit: {
        tooltip: {
          text: "Drag handles or markers to edit features.",
          subtext: "با کلیک بر روی لغو تغییرات اعمال نخواهند شد.",
        },
      },
      remove: {
        tooltip: {
          text: "Click on a feature to remove.",
        },
      },
    },
  },
};

const outerBounds = [
  [50.505, -29.09],
  [52.505, 29.09],
];

const LeafletMap = () => {
  const leafEl = useRef(null);

  const onCreated = (e) => {
    const drawnItems = leafEl.current._layers;
    console.log({ drawnItems });
  };

  const location = [38.9072, -77.0369];

  return (
    <MapContainer
      center={[49.505, -2.09]}
      zoom={24}
      maxZoom={24}
      maxNativeZoom={22}
      style={{ height: "100vh" }}
      zoomControl={false}
      bounds={outerBounds}
    >
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png?apikey={apikey}"
        apikey="db5ae1f5778a448ca662554581f283c5"
        maxZoom={24}
        maxNativeZoom={22}
        opacity={0.8}
      />
      <TileLayer
        url={grid}
        apikey="db5ae1f5778a448ca662554581f283c5"
        maxZoom={24}
        maxNativeZoom={24}
        opacity={0.5}
      />
      <Marker
        position={[49.505, -2.09]}
        //  icon={pinMB}
      >
        <Popup>{bedNumb}</Popup>
      </Marker>
      <FeatureGroup ref={leafEl}>
        <EditControl
          position="topright"
          onCreated={onCreated}
          allowIntersection={false}
        />
      </FeatureGroup>
      <LayerGroup></LayerGroup>
      <ScaleControl position="topleft" />
      <ZoomControl position="topleft" />
    </MapContainer>
  );
};

export default LeafletMap;