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

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

// アイコン定義
export const ItalicIcon = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <line x1="19" y1="4" x2="10" y2="4" />
    <line x1="14" y1="20" x2="5" y2="20" />
    <line x1="15" y1="4" x2="9" y2="20" />
  </svg>
);

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

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

// フォーマット検出ロジック
export const detectItalic = (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 === 'em' || tagName === 'i') return true;
    
    // スタイルベースの検出
    if (computedStyle.fontStyle === 'italic') {
      return true;
    }
    
    element = element.parentElement;
  }

  return false;
};

// フォーマット情報
export const italicFormat = {
  key: 'italic',
  name: __('Italic', 'zenblocks'),
  title: __('Italic', 'zenblocks'),
  icon: ItalicIcon, // 関数コンポーネントとして保持
  apply: applyItalic,
  detect: detectItalic,
  command: 'italic',
  shortcut: 'Ctrl+I',
};

export default italicFormat;