import { InspectorControls } from "@wordpress/block-editor";
import {
  PanelBody,
  TextControl,
  RangeControl,
  Button,
  ColorPicker
} from "@wordpress/components";
import { __ } from "@wordpress/i18n";

const SidePanel = ({ attributes, setAttributes }) => {
  const { apiKey, zoom, markers, borderWidth, borderColor, borderRadius } = attributes;

  const addMarker = () => {
    const newMarker = {
      latitude: 0,
      longitude: 0,
      markerUrl: ""
    };
    setAttributes({
      markers: [...markers, newMarker]
    });
  };

  const updateMarker = (index, field, value) => {
    const updatedMarkers = [...markers];
    updatedMarkers[index] = {
      ...updatedMarkers[index],
      [field]: value
    };
    setAttributes({ markers: updatedMarkers });
  };

  const removeMarker = (index) => {
    const updatedMarkers = markers.filter((_, i) => i !== index);
    setAttributes({ markers: updatedMarkers });
  };

  return (
    <InspectorControls>
      <PanelBody title={__("Map Settings", "orphic-ui")}>
        <RangeControl
          label={__("Zoom Level", "orphic-ui")}
          value={zoom}
          onChange={(value) => setAttributes({ zoom: value })}
          min={1}
          max={20}
        />
      </PanelBody>

      <PanelBody title={__("Border Settings", "orphic-ui")} initialOpen={false}>
        <RangeControl
          label={__("Border Width", "orphic-ui")}
          value={borderWidth}
          onChange={(value) => setAttributes({ borderWidth: value })}
          min={0}
          max={20}
          step={1}
        />
        <RangeControl
          label={__("Border Radius", "orphic-ui")}
          value={borderRadius}
          onChange={(value) => setAttributes({ borderRadius: value })}
          min={0}
          max={50}
          step={1}
        />
        <div style={{ marginTop: '10px' }}>
          <label style={{ display: 'block', marginBottom: '8px' }}>{__("Border Color", "orphic-ui")}</label>
          <ColorPicker
            color={borderColor}
            onChange={(value) => setAttributes({ borderColor: value })}
            enableAlpha
          />
        </div>
      </PanelBody>

      <PanelBody title={__("Markers", "orphic-ui")} initialOpen={false}>
        {markers.map((marker, index) => (
          <div key={index} style={{ marginBottom: "20px", padding: "10px", border: "1px solid #ddd" }}>
            <TextControl
              label={__("Latitude", "orphic-ui")}
              type="number"
              value={marker.latitude}
              onChange={(value) => updateMarker(index, "latitude", parseFloat(value))}
            />
            <TextControl
              label={__("Longitude", "orphic-ui")}
              type="number"
              value={marker.longitude}
              onChange={(value) => updateMarker(index, "longitude", parseFloat(value))}
            />
            <TextControl
              label={__("URL (optional)", "orphic-ui")}
              type="url"
              value={marker.markerUrl}
              onChange={(value) => updateMarker(index, "markerUrl", value)}
            />
            <Button
              isDestructive
              onClick={() => removeMarker(index)}
              style={{ marginTop: "10px" }}
            >
              {__("Remove Marker", "orphic-ui")}
            </Button>
          </div>
        ))}
        <Button
          variant="secondary"
          onClick={addMarker}
          style={{ width: "100%" }}
        >
          {__("Add Marker", "orphic-ui")}
        </Button>
      </PanelBody>
    </InspectorControls>
  );
};

export default SidePanel; 