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.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: placeholder,
        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 icon = (val, zoom) =>
  L.divIcon({
    className: "my-div-icon",
    html: `<div 
    style = 'transform: scale(${Math.pow(2, zoom - 23)})'
    class='origin-top-left w-20 h-40 bg-white rounded text-center flex flex-col p-2 justify-between transition-all delay-200'>
          <p class='h-4 rounded bg-gray-300'> </p>
          <p>${val || 0}</p>
          </div>`,
  });
function MyComponent({ setZoom }) {
  const map = useMap();

  return null;
}
const LeafletMap = () => {
  // const map =
  const [zoom, setZoom] = useState(22);
  const outerBounds = [
    [50.505, -29.09],
    [52.505, 29.09],
  ];

  const leafEl = useRef(null);
  const mapRef = useRef(null);
  const onCreated = () => {
    console.log({ next, add });
    add(Math.floor(Math.random() * 10));
    // const drawnItems = leafEl.current._layers;
    // console.log({ drawnItems });
  };
  const [next, add] = useState(1);
  const location = [38.9072, -77.0369];
  console.log({ mapRef });
  if (mapRef.current) {
    console.log(mapRef.current);
  }
  return (
    <div style={{ direction: "ltr" }}>
      <MapContainer
        whenCreated={(mapInstance) => {
          mapInstance.on("zoomend", function () {
            console.log(mapRef.current);
            setZoom(mapRef.current._zoom);
          });
          mapRef.current = mapInstance;
        }}
        center={[49.505, -2.09]}
        zoom={zoom}
        maxZoom={24}
        minZoom={18}
        maxNativeZoom={22}
        style={{ height: "100vh" }}
        zoomControl={false}
        bounds={outerBounds}
      >
        {/* <MyComponent setZoom={setZoom} /> */}
        <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 icon={icon(50, zoom)} position={[49.505, -2.09]}>
          {/* <Marker position={[49.505, -2.09]} icon={MyCustomMarker2()}> */}
          <Popup>{bedNumb}</Popup>
        </Marker>
        <FeatureGroup ref={leafEl}>
          <EditControl
            draw={{
              polyline: {
                shapeOptions: {
                  color: "#f357a1",
                  weight: 1,
                },
              },
              polygon: {
                allowIntersection: false, // Restricts shapes to simple polygons
                drawError: {
                  color: "#e1e100", // Color the shape will turn when intersects
                  message: "<strong>Oh snap!<strong> you can't draw that!", // Message that will show when intersect
                },
                shapeOptions: {
                  color: "#bada55",
                },
              },
              circle: false, // Turns off this drawing tool
              rectangle: {
                shapeOptions: {
                  clickable: false,
                },
              },
              marker: {
                icon: icon(next, zoom),
              },
            }}
            position="topright"
            count={next}
            onCreated={(e) => {
              console.log({ next, e });
              onCreated(next);
            }}
            allowIntersection={false}
          />
        </FeatureGroup>
        <LayerGroup></LayerGroup>
        <ScaleControl position="topleft" />
        <ZoomControl position="topleft" />
      </MapContainer>
    </div>
  );
};

export default LeafletMap;