import { __ } from "@wordpress/i18n";
import { PanelBody, RangeControl, SelectControl } from "@wordpress/components";
import ResponsiveControl from "../../ResponsiveControl";
import { useResponsiveTab } from "../../ResponsiveTabContext";

const IconPositionSettingV3 = ({ attributes, setAttributes, title, initialOpen = false, panelState, onTogglePanel, isHoverState = false }) => {
  const { activeTab } = useResponsiveTab();
  const suffix = isHoverState ? "Hover" : "";

  const responsiveAttrNameX = isHoverState ? "useResponsiveIconOffsetXHover" : "useResponsiveIconOffsetX";
  const responsiveAttrNameY = isHoverState ? "useResponsiveIconOffsetYHover" : "useResponsiveIconOffsetY";
  const responsiveEnabledX = attributes[responsiveAttrNameX] !== undefined ? attributes[responsiveAttrNameX] : false;
  const responsiveEnabledY = attributes[responsiveAttrNameY] !== undefined ? attributes[responsiveAttrNameY] : false;

  const handleOffsetXChange = (value) => {
    if (!responsiveEnabledX) {
      setAttributes({
        [`iconOffsetXPC${suffix}`]: value,
        [`iconOffsetXSP${suffix}`]: value,
        ...(isHoverState ? {} : { iconOffsetX: value }),
      });
    } else {
      const attributeName = `iconOffsetX${activeTab.toUpperCase()}${suffix}`;
      setAttributes({ [attributeName]: value });
    }
  };

  const handleOffsetYChange = (value) => {
    if (!responsiveEnabledY) {
      setAttributes({
        [`iconOffsetYPC${suffix}`]: value,
        [`iconOffsetYSP${suffix}`]: value,
        ...(isHoverState ? {} : { iconOffsetY: value }),
      });
    } else {
      const attributeName = `iconOffsetY${activeTab.toUpperCase()}${suffix}`;
      setAttributes({ [attributeName]: value });
    }
  };

  const handleOffsetXUnitChange = (value) => {
    if (!responsiveEnabledX) {
      setAttributes({
        [`iconOffsetXUnitPC${suffix}`]: value,
        [`iconOffsetXUnitSP${suffix}`]: value,
        ...(isHoverState ? {} : { iconOffsetXUnit: value }),
      });
    } else {
      const attributeName = `iconOffsetXUnit${activeTab.toUpperCase()}${suffix}`;
      setAttributes({ [attributeName]: value });
    }
  };

  const handleOffsetYUnitChange = (value) => {
    if (!responsiveEnabledY) {
      setAttributes({
        [`iconOffsetYUnitPC${suffix}`]: value,
        [`iconOffsetYUnitSP${suffix}`]: value,
        ...(isHoverState ? {} : { iconOffsetYUnit: value }),
      });
    } else {
      const attributeName = `iconOffsetYUnit${activeTab.toUpperCase()}${suffix}`;
      setAttributes({ [attributeName]: value });
    }
  };

  const handleResponsiveToggle = (value) => {
    setAttributes({
      [responsiveAttrNameX]: value,
      [responsiveAttrNameY]: value,
    });

    if (!value) {
      const pcX = attributes[`iconOffsetXPC${suffix}`] || attributes.iconOffsetX || 0;
      const pcY = attributes[`iconOffsetYPC${suffix}`] || attributes.iconOffsetY || 0;
      const pcXUnit = attributes[`iconOffsetXUnitPC${suffix}`] || attributes.iconOffsetXUnit || "%";
      const pcYUnit = attributes[`iconOffsetYUnitPC${suffix}`] || attributes.iconOffsetYUnit || "%";
      setAttributes({
        [`iconOffsetXSP${suffix}`]: pcX,
        [`iconOffsetYSP${suffix}`]: pcY,
        [`iconOffsetXUnitSP${suffix}`]: pcXUnit,
        [`iconOffsetYUnitSP${suffix}`]: pcYUnit,
      });
    }
  };

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

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

    return (
      <>
        <div style={{ marginBottom: "16px" }}>
          <div style={{ marginBottom: "4px", fontSize: "11px", textTransform: "uppercase", fontWeight: "500" }}>
            {__(`X軸位置 ${tabName.toUpperCase()}`, "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軸位置 ${tabName.toUpperCase()}`, "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 (
    <PanelBody title={title || __("Icon Position", "zenblocks")} initialOpen={initialOpen || panelState} onToggle={onTogglePanel}>
      <ResponsiveControl enableResponsiveToggle={true} onResponsiveToggle={handleResponsiveToggle} responsiveEnabled={responsiveEnabledX}>
        {(tabName) => renderPositionControls(tabName)}
      </ResponsiveControl>
    </PanelBody>
  );
};

export default IconPositionSettingV3;
