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 IconPositionSettingV6 = ({ 
  attributes, 
  setAttributes, 
  title, 
  initialOpen = false, 
  onSync,
  isHoverState = false, 
  supportsHover = true 
}) => {
  const effectiveHoverState = supportsHover ? isHoverState : false;
  const suffix = effectiveHoverState ? "Hover" : "";
  const responsiveAttrName = effectiveHoverState ? "responsiveIconPositionHover" : "responsiveIconPosition";
  const responsiveEnabled = attributes[responsiveAttrName] !== undefined ? attributes[responsiveAttrName] : false;
  const { activeTab } = useResponsiveTabV2();
  const enabledBreakpoints = getEnabledBreakpoints();

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

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

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

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

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

    const syncAttrs = {};
    enabledBreakpoints.slice(1).forEach(bp => {
      syncAttrs[`iconOffsetX${bp.toUpperCase()}${suffix}`] = attributes[`iconOffsetXPC${suffix}`];
      syncAttrs[`iconOffsetY${bp.toUpperCase()}${suffix}`] = attributes[`iconOffsetYPC${suffix}`];
      syncAttrs[`iconOffsetXUnit${bp.toUpperCase()}${suffix}`] = attributes[`iconOffsetXUnitPC${suffix}`];
      syncAttrs[`iconOffsetYUnit${bp.toUpperCase()}${suffix}`] = attributes[`iconOffsetYUnitPC${suffix}`];
    });
    setAttributes(syncAttrs);
  };

  const unitOptions = [
    { label: "%", value: "%" },
    { label: "px", value: "px" },
    { label: "em", value: "em" },
    { label: "rem", value: "rem" },
  ];

  const renderPositionControls = (tabName) => {
    const deviceSuffix = tabName.toUpperCase();
    const offsetXValue = attributes[`iconOffsetX${deviceSuffix}${suffix}`] ?? attributes.iconOffsetX ?? 0;
    const offsetYValue = attributes[`iconOffsetY${deviceSuffix}${suffix}`] ?? attributes.iconOffsetY ?? 0;
    const offsetXUnit = attributes[`iconOffsetXUnit${deviceSuffix}${suffix}`] || attributes.iconOffsetXUnit || "%";
    const offsetYUnit = attributes[`iconOffsetYUnit${deviceSuffix}${suffix}`] || attributes.iconOffsetYUnit || "%";

    return (
      <>
        <div style={{ marginBottom: "16px" }}>
          <div style={{ marginBottom: "4px", fontSize: "11px", textTransform: "uppercase", fontWeight: "500" }}>
            {__("X Position", "zenblocks")}
          </div>
          <div style={{ display: "flex", alignItems: "flex-end", gap: "8px" }}>
            <div style={{ flex: 1 }}>
              <RangeControl
                value={offsetXValue}
                onChange={handleOffsetXChange}
                min={-500}
                max={500}
                step={1}
              />
            </div>
            <div style={{ minWidth: "60px" }}>
              <SelectControl
                value={offsetXUnit}
                options={unitOptions}
                onChange={handleOffsetXUnitChange}
              />
            </div>
          </div>
        </div>
        <div style={{ marginBottom: "16px" }}>
          <div style={{ marginBottom: "4px", fontSize: "11px", textTransform: "uppercase", fontWeight: "500" }}>
            {__("Y Position", "zenblocks")}
          </div>
          <div style={{ display: "flex", alignItems: "flex-end", gap: "8px" }}>
            <div style={{ flex: 1 }}>
              <RangeControl
                value={offsetYValue}
                onChange={handleOffsetYChange}
                min={-500}
                max={500}
                step={1}
              />
            </div>
            <div style={{ minWidth: "60px" }}>
              <SelectControl
                value={offsetYUnit}
                options={unitOptions}
                onChange={handleOffsetYUnitChange}
              />
            </div>
          </div>
        </div>
      </>
    );
  };

  return (
    <PanelBodyWithSync 
      title={title || __("Icon Position", "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) => renderPositionControls(tabName)}
      </ResponsiveControlV2>
    </PanelBodyWithSync>
  );
};

export default IconPositionSettingV6;
