'use client';

import { Marker, MarkerProps } from 'react-leaflet';
import { LatLngTuple, icon as Icon } from 'leaflet';
import { Marker as MarkerDataType } from '@/types/interfaces';
import {TopicsEnum} from "@/config/enums/topic";

type MapMarkerProps = Partial<MarkerProps> & {
  data: MarkerDataType;
  disableMarkerClick?: boolean;
  isActive?: boolean;
};

export default function MapMarker({
  data,
  disableMarkerClick,
  isActive,
  ...rest
}: MapMarkerProps) {
  const position = [data.lat, data.lng] as LatLngTuple;
  const icon = renderMarkerIcon(data.topic);
  if (disableMarkerClick) {
    return (
      <Marker
        position={position}
        icon={Icon({
          iconUrl: icon,
          iconSize: [24, 36],
          className: data.id
        })}
      />
    );
  }

  return (
    <Marker
      {...rest}
      position={position}
      icon={Icon({
        iconUrl: isActive ? '/images/map_markers/kbh_highlighted.png' : icon,
        iconSize: [25, 37],
        className: data.id
      })}
    />
  );
}

const renderMarkerIcon = (type: TopicsEnum | undefined) => {
  switch (type) {
    case 'byens-liv':
      return '/images/map_markers/kbh_orange.png';
    case 'opinion':
      return '/images/map_markers/kbh_turquoise.png';
    case 'visioner':
      return '/images/map_markers/kbh_dark-blue.png';
    case 'projekter':
      return '/images/map_markers/kbh_darkgrey_dot.png';
    case 'foto':
      return '/images/map_markers/kbh_black.png';
    default:
      return '/images/map_markers/kbh_red.png';
  }
};