import React from 'react';
import { __ } from '@wordpress/i18n';

/**
 * 太字フォーマット機能
 * 完全独立モジュール - 他の機能に影響しない
 */

// アイコン定義
export const BoldIcon = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
    <path d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8" />
  </svg>
);

// フォーマット処理ロジック
export const applyBold = (editorRef, currentRange) => {
  if (!currentRange || !editorRef?.current) return;

  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(currentRange);
  
  editorRef.current.focus();
  
  setTimeout(() => {
    document.execCommand('bold', false, null);
    
    // カスタムイベントで更新を通知
    const event = new CustomEvent('formatApplied', {
      detail: { 
        command: 'bold', 
        content: editorRef.current.innerHTML 
      }
    });
    editorRef.current.dispatchEvent(event);
  }, 10);
};

// フォーマット検出ロジック
export const detectBold = (range) => {
  if (!range) return false;

  const container = range.commonAncestorContainer;
  const parentElement = container.nodeType === Node.TEXT_NODE 
    ? container.parentElement 
    : container;

  let element = parentElement;
  while (element && element !== document.body) {
    const tagName = element.tagName?.toLowerCase();
    const computedStyle = window.getComputedStyle(element);
    
    // タグベースの検出
    if (tagName === 'strong' || tagName === 'b') return true;
    
    // スタイルベースの検出
    if (computedStyle.fontWeight === 'bold' || parseInt(computedStyle.fontWeight) >= 700) {
      return true;
    }
    
    element = element.parentElement;
  }

  return false;
};

// フォーマット情報
export const boldFormat = {
  key: 'bold',
  name: __('Bold', 'zenblocks'),
  title: __('Bold', 'zenblocks'),
  icon: "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8", // パス文字列に変更
  apply: applyBold,
  detect: detectBold,
  command: 'bold',
  shortcut: 'Ctrl+B',
};

export default boldFormat;