import React, { useState } from 'react';
import { Button, MapView, ParcelInfoPanel } from '../../../../components/UiComponents';
import { usePekContext } from '../../../../contexts/PekContext';
import styles from './PekMapView.module.css';

const PekMapView: React.FC = () => {
  const [showWfsParcels, setShowWfsParcels] = useState(false);
  const {
    instanceId,
    mapCenter,
    mapZoomBounds,
    parcelGeometries,
    selectionSummary,
    handleMapClick,
    handleParcelClick,
    selectedParcels,
    removeParcel,
    clearSelectedParcels,
    isPanelOpen,
    setIsPanelOpen
  } = usePekContext();

  return (
    <>
      <div className={styles.pekMapWrapper}>
        <div className={styles.checkboxRow}>
          <label className={styles.checkboxLabel}>
            <input
              type="checkbox"
              checked={showWfsParcels}
              onChange={(e) => setShowWfsParcels(e.target.checked)}
            />
            <span>Alle Parzellen anzeigen</span>
          </label>
          <Button
            variant="secondary"
            size="sm"
            onClick={clearSelectedParcels}
            disabled={selectedParcels.length === 0}
          >
            Alle Parzellen abwählen
          </Button>
        </div>
        <div className={styles.mapContainer}>
          <MapView
            parcels={parcelGeometries}
            combinedOutline={selectionSummary?.combinedOutline}
            center={mapCenter || undefined}
            zoomBounds={mapZoomBounds || undefined}
            onMapClick={handleMapClick}
            onParcelClick={handleParcelClick}
            height="100%"
            emptyMessage="Klicken Sie auf die Karte, um einen Standort auszuwählen, oder suchen Sie nach einer Adresse oben."
            showWfsParcels={showWfsParcels}
          />
        </div>
      </div>

      <ParcelInfoPanel
        isOpen={isPanelOpen}
        onClose={() => setIsPanelOpen(false)}
        parcels={selectedParcels}
        selectionSummary={selectionSummary}
        onRemoveParcel={removeParcel}
        instanceId={instanceId}
      />
    </>
  );
};

export default PekMapView;
