import React from 'react';
import { useTranslation } from '@/hooks/useI18n.tsx';
import Button from '@/components/ui/Button.tsx';
import MapFilters from '@/components/map/MapFilters.tsx';
import SidebarContent from '@/components/map/SidebarContent.tsx';
import { useMapUI, useMapInteraction, useMapActions } from '@/contexts/MapContexts.tsx';
import { ArrowLeft } from 'lucide-react';

const MapSidebar = () => {
  const { t } = useTranslation();
  const { isSidebarOpen } = useMapUI();
  const { selectedOrg, selectedLandmark } = useMapInteraction();
  const { handleSelectOrg, handleSelectLandmark } = useMapActions();

  const sidebarClasses = `
        bg-background border-r flex flex-col
        fixed md:relative inset-y-0 left-0 z-30
        w-full max-w-[calc(100%-2rem)] sm:max-w-sm
        transition-transform duration-300 ease-in-out md:transition-[width]
        ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'}
        md:transform-none md:min-w-0 md:shrink-0
        ${isSidebarOpen ? 'md:w-96' : 'md:w-0 md:border-r-0 md:overflow-hidden'}
    `;

  return (
    <aside id="map-sidebar" className={sidebarClasses}>
      {/* Wrapper to contain content and handle overflow, especially for w-0 state */}
      <div
        className={`w-full h-full flex flex-col overflow-hidden ${isSidebarOpen ? 'md:w-96' : 'md:w-0 md:pointer-events-none'}`}
      >
        {!selectedOrg && !selectedLandmark ? (
          <MapFilters />
        ) : (
          <div className="p-4 border-b">
            <Button
              variant="outline"
              onClick={() => {
                handleSelectOrg(null);
                handleSelectLandmark(null);
              }}
            >
              <ArrowLeft className="h-4 mr-2 text-current w-4" />
              {t('mapSidebar.backToList')}
            </Button>
          </div>
        )}

        {/* Content */}
        <SidebarContent />
      </div>
    </aside>
  );
};

export default React.memo(MapSidebar);