import { __ } from "@wordpress/i18n";
import { RangeControl, SelectControl } from "@wordpress/components";
import ResponsiveControlV2 from "../../ResponsiveControlV2";
import { useResponsiveTabV2 } from "../../ResponsiveTabContextV2";
import PanelBodyWithSync from "../../PanelBodyWithSync";
import { getEnabledBreakpoints } from "../../../../../core/breakpoints";

const IconSizeSettingV6 = ({ 
  attributes, 
  setAttributes, 
  title, 
  initialOpen = false, 
  onSync,
  isHoverState = false, 
  supportsHover = true 
}) => {
  const effectiveHoverState = supportsHover ? isHoverState : false;
  const suffix = effectiveHoverState ? "Hover" : "";
  const responsiveAttrName = effectiveHoverState ? "responsiveIconSizeHover" : "responsiveIconSize";
  const responsiveEnabled = attributes[responsiveAttrName] !== undefined ? attributes[responsiveAttrName] : false;
  const { activeTab } = useResponsiveTabV2();
  const enabledBreakpoints = getEnabledBreakpoints();

  const handleSizeChange = (value) => {
    if (!responsiveEnabled) {
      const attrs = {};
      enabledBreakpoints.forEach(bp => {
        attrs[`iconSize${bp.toUpperCase()}${suffix}`] = value;
      });
      setAttributes(attrs);
    } else {
      const deviceSuffix = activeTab.toUpperCase();
      setAttributes({ [`iconSize${deviceSuffix}${suffix}`]: value });
    }
  };

  const handleUnitChange = (value) => {
    if (!responsiveEnabled) {
      const attrs = {};
      enabledBreakpoints.forEach(bp => {
        attrs[`iconSizeUnit${bp.toUpperCase()}${suffix}`] = value;
      });
      setAttributes(attrs);
    } else {
      const deviceSuffix = activeTab.toUpperCase();
      setAttributes({ [`iconSizeUnit${deviceSuffix}${suffix}`]: value });
    }
  };

  const handleResponsiveToggle = (value) => {
    setAttributes({ [responsiveAttrName]: value });

    const syncAttrs = {};
    enabledBreakpoints.slice(1).forEach(bp => {
      syncAttrs[`iconSize${bp.toUpperCase()}${suffix}`] = attributes[`iconSizePC${suffix}`];
      syncAttrs[`iconSizeUnit${bp.toUpperCase()}${suffix}`] = attributes[`iconSizeUnitPC${suffix}`];
    });
    setAttributes(syncAttrs);
  };

  const renderSizeControls = (tabName) => {
    const deviceSuffix = tabName.toUpperCase();
    const sizeValue = attributes[`iconSize${deviceSuffix}${suffix}`] || attributes.iconSize || 25;
    const unitValue = attributes[`iconSizeUnit${deviceSuffix}${suffix}`] || attributes.iconSizeUnit || "px";

    return (
      <div style={{ display: "flex", alignItems: "flex-end", gap: "8px" }}>
        <div style={{ flex: 1 }}>
          <RangeControl value={sizeValue} onChange={handleSizeChange} min={12} max={250} step={1} />
        </div>
        <div style={{ minWidth: "40px" }}>
          <SelectControl
            value={unitValue}
            options={[
              { label: "px", value: "px" },
              { label: "em", value: "em" },
              { label: "rem", value: "rem" },
            ]}
            onChange={handleUnitChange}
          />
        </div>
      </div>
    );
  };

  return (
    <PanelBodyWithSync 
      title={title || __("Icon Size", "zenblocks")} 
      initialOpen={initialOpen} 
      onSync={onSync} 
      className="zenblocks-nested-panel"
    >
      <ResponsiveControlV2
        initialOpen={true}
        enableResponsiveToggle={true}
        responsiveEnabled={responsiveEnabled}
        onResponsiveToggle={handleResponsiveToggle}
        attributes={attributes}
        setAttributes={setAttributes}
        syncAttributeName={responsiveAttrName}
      >
        {(tabName) => renderSizeControls(tabName)}
      </ResponsiveControlV2>
    </PanelBodyWithSync>
  );
};

export default IconSizeSettingV6;
