import { __ } from '@wordpress/i18n';
import { PanelBody, SelectControl } from '@wordpress/components';
import ResponsiveControl from '../../ResponsiveControl';

const FontWeightSetting = ({ 
  attributes, 
  setAttributes, 
  title, 
  initialOpen = false, 
  panelState, 
  onTogglePanel 
}) => {
  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 renderFontWeightControls = (device) => {
    const isPC = device === 'pc';
    const currentWeight = isPC ? attributes.fontWeightPC : attributes.fontWeightSP;

    return (
      <SelectControl
        value={currentWeight}
        options={fontWeightOptions}
        onChange={(value) => {
          if (isPC) {
            setAttributes({
              fontWeightPC: value,
              fontWeight: value,
              useResponsiveFontWeight: true,
            });
          } else {
            setAttributes({
              fontWeightSP: value,
              useResponsiveFontWeight: true,
            });
          }
        }}
      />
    );
  };

  return (
    <PanelBody 
      title={title || __('Font Weight', 'zenblocks')} 
      initialOpen={initialOpen !== undefined ? initialOpen : (panelState !== undefined ? panelState : false)}
      onToggle={onTogglePanel}
    >
      <div className="zenblocks-inspector-font-weight">
        <ResponsiveControl>
          {(activeTab) => renderFontWeightControls(activeTab)}
        </ResponsiveControl>
      </div>
    </PanelBody>
  );
};

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 FontWeightSetting;
