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

const FontWeightSettingV6 = ({ 
  attributes, 
  setAttributes, 
  title, 
  initialOpen = false, 
  onSync,
  isHoverState = false,
  supportsHover = true
}) => {
  const effectiveHoverState = supportsHover ? isHoverState : false;
  const hoverSuffix = effectiveHoverState ? 'Hover' : '';
  const responsiveAttrName = effectiveHoverState ? 'responsiveFontWeightHover' : 'responsiveFontWeight';
  const responsiveEnabled = attributes[responsiveAttrName] !== undefined ? attributes[responsiveAttrName] : false;
  const { activeTab } = useResponsiveTabV2();
  const enabledBreakpoints = getEnabledBreakpoints();

  const fontWeightOptions = [
    { label: __('Normal', 'zenblocks'), value: 'normal' },
    { label: __('Bold', 'zenblocks'), value: 'bold' },
    { label: __('Light', 'zenblocks'), value: 'lighter' },
    { label: __('Bolder', 'zenblocks'), value: 'bolder' },
    { label: __('Weight 100', 'zenblocks'), value: '100' },
    { label: __('Weight 200', 'zenblocks'), value: '200' },
    { label: __('Weight 300', 'zenblocks'), value: '300' },
    { label: __('Weight 400', 'zenblocks'), value: '400' },
    { label: __('Weight 500', 'zenblocks'), value: '500' },
    { label: __('Weight 600', 'zenblocks'), value: '600' },
    { label: __('Weight 700', 'zenblocks'), value: '700' },
    { label: __('Weight 800', 'zenblocks'), value: '800' },
    { label: __('Weight 900', 'zenblocks'), value: '900' },
  ];

  const handleFontWeightChange = (value) => {
    if (!responsiveEnabled) {
      const updates = {};
      enabledBreakpoints.forEach(bp => {
        updates[`fontWeight${bp.toUpperCase()}${hoverSuffix}`] = value;
      });
      setAttributes(updates);
    } else {
      const deviceSuffix = activeTab.toUpperCase();
      setAttributes({ [`fontWeight${deviceSuffix}${hoverSuffix}`]: value });
    }
  };

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

    const syncAttrs = {};
    enabledBreakpoints.slice(1).forEach(bp => {
      syncAttrs[`fontWeight${bp.toUpperCase()}${hoverSuffix}`] = attributes[`fontWeightPC${hoverSuffix}`];
    });
    setAttributes(syncAttrs);
  };

  const renderFontWeightControls = (tabName) => {
    const deviceSuffix = tabName.toUpperCase();
    const currentWeight = attributes[`fontWeight${deviceSuffix}${hoverSuffix}`] || 'normal';

    return (
      <div className="zenblocks-inspector-font-weight">
        <SelectControl
          value={currentWeight}
          options={fontWeightOptions}
          onChange={handleFontWeightChange}
          className="zenblocks-inspector-font-weight__select"
        />
      </div>
    );
  };

  return (
    <PanelBodyWithSync 
      title={title || __('Font Weight', '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) => renderFontWeightControls(tabName)}
      </ResponsiveControlV2>
    </PanelBodyWithSync>
  );
};

export const getFontWeightValue = (attributes, device = 'pc') => {
  if (!attributes) return 'normal';

  const deviceUpper = device.toUpperCase();
  const fontWeight = attributes[`fontWeight${deviceUpper}`];

  if (fontWeight) {
    return fontWeight;
  }

  const values = {};
  BREAKPOINT_ORDER.forEach(bp => {
    values[bp] = attributes[`fontWeight${bp.toUpperCase()}`];
  });
  
  return getInheritedValue(values, device) || 'normal';
};

export const getDirectFontWeight = (attributes, device = 'pc') => {
  if (!attributes) return 'normal';

  const deviceUpper = device.toUpperCase();
  const fontWeight = attributes[`fontWeight${deviceUpper}`];

  return fontWeight || 'normal';
};

export default FontWeightSettingV6;
