"use client";

import React, { useEffect } from "react";
import "ol/ol.css"; // استفاده از استایل‌های OpenLayers
import Map from "ol/Map";
import { fromLonLat } from "ol/proj";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";
import { Fill, Stroke, Style } from "ol/style";
import CircleStyle from "ol/style/Circle";

const map = ({ data }) => {
  useEffect(() => {
    const dynamicLocation = data?.location_company.split(",");
    const markerCoordinates = fromLonLat([
      dynamicLocation[1],
      dynamicLocation[0],
    ]);
    // ایجاد نقشه
    const map = new Map({
      target: "map", // نام DOM element برای جایگذاری نقشه
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      view: new View({
        center: markerCoordinates, // مرکز نقشه
        zoom: 16, // بزرگنمایی نقشه
      }),
    });
    // ایجاد مارکر
    const marker = new Feature({
      geometry: new Point(markerCoordinates),
    });

    // تعریف سبک مارکر (مثلاً یک نقطه قرمز)
    marker.setStyle(
      new Style({
        image: new CircleStyle({
          radius: 7,
          fill: new Fill({
            color: "red",
          }),
          stroke: new Stroke({
            color: "white",
            width: 2,
          }),
        }),
      })
    );

    // ایجاد منبع و لایه برای مارکر
    const vectorSource = new VectorSource({
      features: [marker],
    });

    const vectorLayer = new VectorLayer({
      source: vectorSource,
    });

    // افزودن لایه مارکر به نقشه
    map.addLayer(vectorLayer);
  }, []);

  return (
    <>
      <div id="map" style={{ width: "100%", height: "400px" }}></div>
    </>
  );
};

export default map;