import { InspectorControls } from "@wordpress/block-editor";
import { RangeControl, PanelBody, TextControl, ToggleControl, SelectControl } 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 }) => {
	return (
		<>
			<InspectorControls>
				<PanelBody title={__("Spacing Settings", "orphic-ui")}>
					<TextControl
						label={__("Desktop height in px", "orphic-ui")}
						value={attributes.desktop}
						onChange={(value) => {
							let num = parseInt(value);
							if (isNaN(num)) {
								num = 0;
							}
							setAttributes({ desktop: num });
						}}
					/>
					<TextControl
						label={__("Tablet height in px", "orphic-ui")}
						value={attributes.tablet}
						onChange={(value) => {
							let num = parseInt(value);
							if (isNaN(num)) {
								num = 0;
							}
							setAttributes({ tablet: num });
						}}
					/>
					<TextControl
						label={__("Mobile height in px", "orphic-ui")}
						value={attributes.mobile}
						onChange={(value) => {
							let num = parseInt(value);
							if (isNaN(num)) {
								num = 0;
							}
							setAttributes({ mobile: num });
						}}
					/>
				</PanelBody>
        <PanelBody title={__("Breakpoint Settings", "orphic-ui")}>
          {/* Desktop Breakpoint */}
          <ToggleControl
            label={__("Custom Desktop Breakpoint", "orphic-ui")}
            checked={attributes.customBreakpointDesktop}
            onChange={(value) => setAttributes({ customBreakpointDesktop: value })}
            help={
              attributes.customBreakpointDesktop
                ? __("Using custom breakpoint", "orphic-ui")
                : __("Using default breakpoint", "orphic-ui")
            }
          />
          {attributes.customBreakpointDesktop && (
            <SelectControl
              label={__("Desktop Breakpoint", "orphic-ui")}
              value={attributes.breakpointValueDesktop}
              options={BREAKPOINT_VALUES}
              onChange={(value) => setAttributes({ breakpointValueDesktop: parseInt(value) })}
            />
          )}

          {/* Tablet Breakpoint */}
          <ToggleControl
            label={__("Custom Tablet Breakpoint", "orphic-ui")}
            checked={attributes.customBreakpointTablet}
            onChange={(value) => setAttributes({ customBreakpointTablet: value })}
            help={
              attributes.customBreakpointTablet
                ? __("Using custom breakpoint range", "orphic-ui")
                : __("Using default breakpoint range", "orphic-ui")
            }
          />
          {attributes.customBreakpointTablet && (
            <>
              <SelectControl
                label={__("Tablet Min Breakpoint", "orphic-ui")}
                value={attributes.breakpointValueTabletMin}
                options={BREAKPOINT_VALUES.filter(option => option.value < attributes.breakpointValueTabletMax)}
                onChange={(value) => setAttributes({ breakpointValueTabletMin: parseInt(value) })}
              />
              <SelectControl
                label={__("Tablet Max Breakpoint", "orphic-ui")}
                value={attributes.breakpointValueTabletMax}
                options={BREAKPOINT_VALUES.filter(option => option.value > attributes.breakpointValueTabletMin)}
                onChange={(value) => setAttributes({ breakpointValueTabletMax: parseInt(value) })}
              />
            </>
          )}

          {/* Mobile Breakpoint */}
          <ToggleControl
            label={__("Custom Mobile Breakpoint", "orphic-ui")}
            checked={attributes.customBreakpointMobile}
            onChange={(value) => setAttributes({ customBreakpointMobile: value })}
            help={
              attributes.customBreakpointMobile
                ? __("Using custom breakpoint", "orphic-ui")
                : __("Using default breakpoint", "orphic-ui")
            }
          />
          {attributes.customBreakpointMobile && (
            <SelectControl
              label={__("Mobile Breakpoint", "orphic-ui")}
              value={attributes.breakpointValueMobile}
              options={BREAKPOINT_VALUES}
              onChange={(value) => setAttributes({ breakpointValueMobile: parseInt(value) })}
            />
          )}
        </PanelBody>
			</InspectorControls>
		</>
	);
};
export default SidePanel;
