import { InspectorControls } from "@wordpress/block-editor";
import {
  PanelBody,
  SelectControl,
  ToggleControl,
  __experimentalDivider as Divider
} from "@wordpress/components";
import { __ } from "@wordpress/i18n";

// Options de breakpoints pour les sélecteurs
const BREAKPOINT_VALUES = [
  { label: "600px", value: 600 },
  { label: "650px", value: 650 },
  { label: "700px", value: 700 },
  { label: "750px", value: 750 },
  { label: "768px (default mobile)", value: 768 },
  { label: "800px", value: 800 },
  { label: "850px", value: 850 },
  { label: "900px", value: 900 },
  { label: "950px (default desktop)", value: 950 },
  { label: "1000px", value: 1000 },
  { label: "1024px (default tablet max)", value: 1024 },
  { label: "1100px", value: 1100 },
  { label: "1200px", value: 1200 },
  { label: "1300px", value: 1300 },
  { label: "1400px", value: 1400 }
];

const SidePanel = ({ attributes, setAttributes }) => {
  const { displayMode, customBreakpoint, breakpointValue, minBreakpoint, maxBreakpoint } = attributes;

  // Options pour le type d'affichage
  const displayModeOptions = [
    { label: __("Desktop", "orphic-ui"), value: "desktop" },
    { label: __("Mobile", "orphic-ui"), value: "mobile" },
    { label: __("Tablet", "orphic-ui"), value: "tablet" }
  ];

  // Gestion des changements de mode d'affichage
  const handleDisplayModeChange = (value) => {
    // Définir les valeurs par défaut selon le mode
    let newAttributes = { 
      displayMode: value,
      customBreakpoint: false 
    };
    
    // Ajuster la valeur de breakpoint par défaut selon le mode
    if (value === 'mobile' && breakpointValue === 950) {
      newAttributes.breakpointValue = 768; // Valeur par défaut pour mobile
    } else if (value === 'desktop' && breakpointValue === 768) {
      newAttributes.breakpointValue = 950; // Valeur par défaut pour desktop
    }
    
    setAttributes(newAttributes);
  };

  return (
    <InspectorControls>
      <PanelBody title={__("Breakpoint Settings", "orphic-ui")}>
        <SelectControl
          label={__("Display Mode", "orphic-ui")}
          value={displayMode}
          options={displayModeOptions}
          onChange={handleDisplayModeChange}
        />

        <Divider />

        {displayMode === "desktop" && (
          <>
            <ToggleControl
              label={__("Use Custom Breakpoint", "orphic-ui")}
              checked={customBreakpoint}
              onChange={(value) => setAttributes({ customBreakpoint: value })}
              help={
                customBreakpoint
                  ? __("Using custom breakpoint", "orphic-ui")
                  : __("Using default breakpoint set in admin options", "orphic-ui")
              }
            />
            
            {customBreakpoint && (
              <SelectControl
                label={__("Show only above", "orphic-ui")}
                value={breakpointValue}
                options={BREAKPOINT_VALUES}
                onChange={(value) => setAttributes({ breakpointValue: parseInt(value) })}
              />
            )}
          </>
        )}

        {displayMode === "mobile" && (
          <>
            <ToggleControl
              label={__("Use Custom Breakpoint", "orphic-ui")}
              checked={customBreakpoint}
              onChange={(value) => setAttributes({ customBreakpoint: value })}
              help={
                customBreakpoint
                  ? __("Using custom breakpoint", "orphic-ui")
                  : __("Using default breakpoint set in admin options", "orphic-ui")
              }
            />
            
            {customBreakpoint && (
              <SelectControl
                label={__("Show only below", "orphic-ui")}
                value={breakpointValue}
                options={BREAKPOINT_VALUES}
                onChange={(value) => setAttributes({ breakpointValue: parseInt(value) })}
              />
            )}
          </>
        )}

        {displayMode === "tablet" && (
          <>
            <ToggleControl
              label={__("Use Custom Range", "orphic-ui")}
              checked={customBreakpoint}
              onChange={(value) => setAttributes({ customBreakpoint: value })}
              help={
                customBreakpoint
                  ? __("Using custom range", "orphic-ui")
                  : __("Using default range set in admin options", "orphic-ui")
              }
            />
            
            {customBreakpoint && (
              <>
                <SelectControl
                  label={__("Show from", "orphic-ui")}
                  value={minBreakpoint}
                  options={BREAKPOINT_VALUES.filter(option => option.value < maxBreakpoint)}
                  onChange={(value) => setAttributes({ minBreakpoint: parseInt(value) })}
                />
                <SelectControl
                  label={__("Up to", "orphic-ui")}
                  value={maxBreakpoint}
                  options={BREAKPOINT_VALUES.filter(option => option.value > minBreakpoint)}
                  onChange={(value) => setAttributes({ maxBreakpoint: parseInt(value) })}
                />
              </>
            )}
          </>
        )}
      </PanelBody>
    </InspectorControls>
  );
};

export default SidePanel; 