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

const FontFamilySetting = ({ attributes, setAttributes, title, initialOpen = false, panelState, onTogglePanel }) => {
  const fontFamilyOptions = [
    { label: __('Default', 'zenblocks'), value: '' },
    { label: __('System Font', 'zenblocks'), value: 'system' },
    { label: __('Noto Sans JP', 'zenblocks'), value: 'noto-sans-jp' },
    { label: __('Noto Serif JP', 'zenblocks'), value: 'noto-serif-jp' },
    { label: __('M PLUS 1p', 'zenblocks'), value: 'm-plus-1p' },
    { label: __('M PLUS Rounded 1c', 'zenblocks'), value: 'm-plus-rounded-1c' },
    { label: __('Sawarabi Gothic', 'zenblocks'), value: 'sawarabi-gothic' },
  ];

  return (
    <PanelBody 
      title={title || __('Font Family', 'zenblocks')} 
      initialOpen={initialOpen !== undefined ? initialOpen : (panelState !== undefined ? panelState : false)}
      onToggle={onTogglePanel}
    >
      <div className="zenblocks-inspector-font-family">
        <SelectControl
          value={attributes.fontFamily || ''}
          options={fontFamilyOptions}
          onChange={(value) => setAttributes({ fontFamily: value })}
        />
      </div>
    </PanelBody>
  );
};

export const getFontFamilyValue = (fontFamily) => {
  if (!fontFamily) return undefined;

  if (fontFamily === 'system') {
    return '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
  }

  return `var(--wp--preset--font-family--${fontFamily})`;
};

export default FontFamilySetting;
