import Button from '@/components/ui/Button.tsx';
import { useMapActions, useMapUI } from '@/contexts/MapContexts.tsx';
import { useTranslation } from '@/hooks/useI18n';
import { Package, RotateCw, Wrench, ZoomIn, ZoomOut } from 'lucide-react';
import React from 'react';
import { useMap } from 'react-leaflet';

// Bugulma center coordinates [lat, lng] for Leaflet
const BUGULMA_CENTER: [number, number] = [54.5384152, 52.7955953];
const DEFAULT_ZOOM = 12;

const MapControls: React.FC = () => {
  const { t } = useTranslation();
  const map = useMap();
  const { resetView } = useMapActions();
  const { showProductsServices, toggleProductsServices } = useMapUI();

  const handleZoomIn = () => {
    map.zoomIn();
  };

  const handleZoomOut = () => {
    map.zoomOut();
  };

  const handleReset = () => {
    map.setView(BUGULMA_CENTER, DEFAULT_ZOOM, { animate: true });
    resetView();
  };

  return (
    <div className="absolute bottom-4 right-4 flex flex-col gap-2 z-50">
      <Button
        variant={showProductsServices ? 'default' : 'outline'}
        size="sm"
        onClick={toggleProductsServices}
        className="h-10 w-10 p-0 shadow-md"
        aria-label={t('mapViewMode.discovery')}
        title={t('mapViewMode.discovery')}
      >
        <div className="relative">
          <Package className="h-4 w-4 text-current" />
          <Wrench className="h-3 w-3 text-current absolute -bottom-1 -right-1" />
        </div>
      </Button>
      <Button
        variant="outline"
        size="sm"
        onClick={handleZoomIn}
        className="h-10 w-10 p-0 shadow-md"
        aria-label="Zoom in"
      >
        <ZoomIn className="h-4 h-5 text-current w-4 w-5" />
      </Button>
      <Button
        variant="outline"
        size="sm"
        onClick={handleZoomOut}
        className="h-10 w-10 p-0 shadow-md"
        aria-label="Zoom out"
      >
        <ZoomOut className="h-4 h-5 text-current w-4 w-5" />
      </Button>
      <Button
        variant="outline"
        size="sm"
        onClick={handleReset}
        className="h-10 w-10 p-0 shadow-md"
        aria-label="Reset view"
      >
        <RotateCw className="h-4 h-5 text-current w-4 w-5" />
      </Button>
    </div>
  );
};

export default React.memo(MapControls);