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

const getDefaultBorderWidth = () => ({
  pc: { value: "1", unit: "px" },
  md: { value: "", unit: "px" },
  tb: { value: "", unit: "px" },
  sp: { value: "", unit: "px" }
});

const StylingBorderWidthSettingV8 = ({ 
  attributes, 
  setAttributes, 
  label,
  attrName = "borderWidthV2",
  responsiveAttrName: customResponsiveAttrName,
  defaultValue = "1",
  min = 0,
  max = 10
}) => {
  const responsiveAttrName = customResponsiveAttrName || `useResponsive${attrName.charAt(0).toUpperCase() + attrName.slice(1)}`;
  const responsiveEnabled = attributes[responsiveAttrName] || false;
  const { activeTab } = useResponsiveTabV2();
  const enabledBreakpoints = getEnabledBreakpoints();
  const borderWidthData = attributes[attrName] || getDefaultBorderWidth();

  const handleWidthChange = (value) => {
    const newData = { ...borderWidthData };
    if (!responsiveEnabled) {
      enabledBreakpoints.forEach((bp) => {
        newData[bp] = { ...newData[bp], value: String(value) };
      });
    } else {
      newData[activeTab] = { ...newData[activeTab], value: String(value) };
    }
    setAttributes({ [attrName]: newData });
  };

  const handleResponsiveToggle = (value) => {
    const newData = JSON.parse(JSON.stringify(borderWidthData));
    const pcData = newData.pc;
    enabledBreakpoints.forEach((bp) => {
      if (bp !== 'pc') {
        newData[bp] = { ...pcData };
      }
    });
    setAttributes({ [attrName]: newData, [responsiveAttrName]: value });
  };

  const renderControls = (tabName) => {
    const tabData = borderWidthData[tabName] || { value: defaultValue, unit: "px" };
    const currentValue = parseInt(tabData.value) || parseInt(defaultValue);

    return (
      <RangeControl
        label={label || __("Border Width", "zenblocks")}
        value={currentValue}
        onChange={handleWidthChange}
        min={min}
        max={max}
      />
    );
  };

  return (
    <div className="zenblocks-border-width-setting">
      <ResponsiveControlV2
        initialOpen={true}
        enableResponsiveToggle={true}
        responsiveEnabled={responsiveEnabled}
        onResponsiveToggle={handleResponsiveToggle}
        attributes={attributes}
        setAttributes={setAttributes}
        syncAttributeName={responsiveAttrName}
      >
        {(tabName) => renderControls(tabName)}
      </ResponsiveControlV2>
    </div>
  );
};

export const getDirectBorderWidthV8 = (attributes, attrName = "borderWidthV2", device = 'pc') => {
  const borderWidthData = attributes[attrName];
  
  if (!borderWidthData || !borderWidthData[device]) return undefined;
  
  const { value, unit } = borderWidthData[device];
  
  if (value && value !== '') {
    return `${value}${unit || 'px'}`;
  }
  
  return undefined;
};

export const getBorderWidthV8 = (attributes, attrName = "borderWidthV2", device = 'pc', defaultValue = '1px') => {
  const borderWidthData = attributes[attrName];
  
  if (!borderWidthData) return defaultValue;
  
  const enabledBreakpoints = getEnabledBreakpoints();
  const currentIndex = enabledBreakpoints.indexOf(device);
  
  for (let i = currentIndex; i >= 0; i--) {
    const bp = enabledBreakpoints[i];
    const bpData = borderWidthData[bp];
    if (bpData && bpData.value && bpData.value !== '') {
      return `${bpData.value}${bpData.unit || 'px'}`;
    }
  }
  
  return defaultValue;
};

export default StylingBorderWidthSettingV8;
