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

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

  const responsiveAttrName = isHoverState ? "useResponsiveIconFrameRadiusHover" : "useResponsiveIconFrameRadius";
  const responsiveEnabled = attributes[responsiveAttrName] !== undefined ? attributes[responsiveAttrName] : false;

  const handleRadiusChange = (value) => {
    if (!responsiveEnabled) {
      setAttributes({
        [`iconFrameRadiusPC${suffix}`]: value,
        [`iconFrameRadiusSP${suffix}`]: value,
        ...(isHoverState ? {} : { iconFrameRadius: value }),
      });
    } else {
      const attributeName = `iconFrameRadius${activeTab.toUpperCase()}${suffix}`;
      setAttributes({ [attributeName]: value });
    }
  };

  const handleUnitChange = (unit) => {
    if (!responsiveEnabled) {
      setAttributes({
        [`iconFrameRadiusUnitPC${suffix}`]: unit,
        [`iconFrameRadiusUnitSP${suffix}`]: unit,
        ...(isHoverState ? {} : { iconFrameRadiusUnit: unit }),
      });
    } else {
      const attributeName = `iconFrameRadiusUnit${activeTab.toUpperCase()}${suffix}`;
      setAttributes({ [attributeName]: unit });
    }
  };

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

    if (!value) {
      const pcRadius = attributes[`iconFrameRadiusPC${suffix}`] ?? attributes[`iconFrameRadius${suffix}`] ?? attributes.iconFrameRadius ?? 0;
      const pcUnit = attributes[`iconFrameRadiusUnitPC${suffix}`] ?? attributes[`iconFrameRadiusUnit${suffix}`] ?? attributes.iconFrameRadiusUnit ?? "px";
      setAttributes({
        [`iconFrameRadiusSP${suffix}`]: pcRadius,
        [`iconFrameRadiusUnitSP${suffix}`]: pcUnit,
      });
    }
  };

  const renderRadiusControls = (tabName) => {
    const deviceSuffix = tabName.toUpperCase();
    const radiusValue = attributes[`iconFrameRadius${deviceSuffix}${suffix}`] ?? attributes[`iconFrameRadius${suffix}`] ?? attributes.iconFrameRadius ?? 0;
    const unitValue = attributes[`iconFrameRadiusUnit${deviceSuffix}${suffix}`] ?? attributes[`iconFrameRadiusUnit${suffix}`] ?? attributes.iconFrameRadiusUnit ?? "px";

    const handleRadiusChangeForDevice = (value) => {
      if (!responsiveEnabled) {
        setAttributes({
          [`iconFrameRadiusPC${suffix}`]: value,
          [`iconFrameRadiusSP${suffix}`]: value,
          ...(isHoverState ? {} : { iconFrameRadius: value }),
        });
      } else {
        const attributeName = `iconFrameRadius${deviceSuffix}${suffix}`;
        setAttributes({ [attributeName]: value });
      }
    };

    const handleUnitChangeForDevice = (unit) => {
      if (!responsiveEnabled) {
        setAttributes({
          [`iconFrameRadiusUnitPC${suffix}`]: unit,
          [`iconFrameRadiusUnitSP${suffix}`]: unit,
          ...(isHoverState ? {} : { iconFrameRadiusUnit: unit }),
        });
      } else {
        const attributeName = `iconFrameRadiusUnit${deviceSuffix}${suffix}`;
        setAttributes({ [attributeName]: unit });
      }
    };

    return (
      <div style={{ display: "flex", alignItems: "flex-end", gap: "8px" }}>
        <div style={{ flex: 1 }}>
          <RangeControl value={radiusValue} onChange={handleRadiusChangeForDevice} min={0} max={999} step={1} />
        </div>
        <div style={{ minWidth: "40px" }}>
          <SelectControl
            value={unitValue}
            options={[
              { label: "px", value: "px" },
              { label: "%", value: "%" },
            ]}
            onChange={handleUnitChangeForDevice}
          />
        </div>
      </div>
    );
  };

  return (
    <PanelBody title={title || __("Border Radius", "zenblocks")} initialOpen={initialOpen || panelState} onToggle={onTogglePanel} className="zenblocks-panel zenblocks-panel--level-3 zenblocks-panel--settings zenblocks-panel--icon-frame-radius">
      <ResponsiveControl enableResponsiveToggle={true} onResponsiveToggle={handleResponsiveToggle} responsiveEnabled={responsiveEnabled}>
        {(tabName) => renderRadiusControls(tabName)}
      </ResponsiveControl>
    </PanelBody>
  );
};

export default IconFrameRadiusSettingV3;
