import { __ } from '@wordpress/i18n';
import { SelectControl } from '@wordpress/components';
import ResponsiveControl from '../../ResponsiveControl';
import { useResponsiveTab } from '../../ResponsiveTabContext';
import PanelBodyWithSync from '../../PanelBodyWithSync';

const FontWeightSettingV4 = ({ 
  attributes, 
  setAttributes, 
  title, 
  initialOpen = false, 
  panelState, 
  onTogglePanel,
  isHoverState = false,
  onSync
}) => {
  const { activeTab } = useResponsiveTab();

  const responsiveAttrName = isHoverState ? 'responsiveFontWeightHover' : 'responsiveFontWeight';
  const responsiveEnabled = attributes[responsiveAttrName] !== undefined ? attributes[responsiveAttrName] : false;

  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) => {
    const suffix = isHoverState ? 'Hover' : '';
    if (!responsiveEnabled) {
      setAttributes({
        [`fontWeightPC${suffix}`]: value,
        [`fontWeightSP${suffix}`]: value,
        fontWeight: value,
        useResponsiveFontWeight: true,
      });
    } else {
      const attributeName = `fontWeight${activeTab.toUpperCase()}${suffix}`;
      setAttributes({
        [attributeName]: value,
        useResponsiveFontWeight: true,
      });
    }
  };

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

    if (!value) {
      const suffix = isHoverState ? 'Hover' : '';
      setAttributes({
        [`fontWeightSP${suffix}`]: attributes[`fontWeightPC${suffix}`],
      });
    }
  };

  const renderFontWeightControls = (tabName) => {
    const suffix = isHoverState ? 'Hover' : '';
    const currentWeight = attributes[`fontWeight${tabName.toUpperCase()}${suffix}`];

    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 !== undefined ? initialOpen : (panelState !== undefined ? panelState : false)}
      onToggle={onTogglePanel}
      onSync={onSync}
      className="zenblocks-nested-panel"
    >
      <ResponsiveControl
        enableResponsiveToggle={true}
        responsiveEnabled={responsiveEnabled}
        onResponsiveToggle={handleResponsiveToggle}
      >
        {(tabName) => renderFontWeightControls(tabName)}
      </ResponsiveControl>
    </PanelBodyWithSync>
  );
};

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

  const { fontWeight, fontWeightPC, fontWeightSP, useResponsiveFontWeight } = attributes;

  if (useResponsiveFontWeight) {
    if (device === 'pc') {
      return fontWeightPC || fontWeight || 'normal';
    } else if (device === 'sp') {
      return fontWeightSP || fontWeight || 'normal';
    }
  }

  return fontWeight || 'normal';
};

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

  const { fontWeight, fontWeightPC, fontWeightSP, useResponsiveFontWeight } = attributes;

  if (useResponsiveFontWeight) {
    if (device === 'pc') {
      return fontWeightPC || fontWeight || 'normal';
    } else if (device === 'sp') {
      return fontWeightSP || fontWeight || 'normal';
    }
  }

  return fontWeight || 'normal';
};

export default FontWeightSettingV4;
