import { RichText } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
import { useState, useEffect } from "@wordpress/element";
import { useResponsiveTab } from "../../ResponsiveTabContext";
import { getDirectFontSize, getTextBasicCSSVariables } from "./helpers";

/**
 * テキスト基本表示コンポーネント
 *
 * @param {Object} props コンポーネントのプロパティ
 * @param {Object} props.attributes ブロックの属性
 * @param {Function} props.setAttributes 属性を更新する関数
 * @param {string} props.className テキストコンテナのクラス名
 * @param {Object} props.style 追加のスタイル（オプション）
 * @param {boolean} props.showCaption キャプションを表示するか
 * @param {boolean} props.showTitle タイトルを表示するか
 * @param {boolean} props.showDescription 説明を表示するか
 * @param {string} props.captionPlaceholder キャプションのプレースホルダー
 * @param {string} props.titlePlaceholder タイトルのプレースホルダー
 * @param {string} props.descriptionPlaceholder 説明のプレースホルダー
 * @param {Array} props.allowedFormats 許可されるRichTextフォーマット
 * @returns {JSX.Element} テキスト表示要素
 */
const TextBasicRender = ({ 
  attributes, 
  setAttributes, 
  className = "text-basic",
  style = {},
  showCaption = true,
  showTitle = true,
  showDescription = true,
  captionPlaceholder = __("Enter caption...", "zenblocks"),
  titlePlaceholder = __("Enter title...", "zenblocks"),
  descriptionPlaceholder = __("Enter description...", "zenblocks"),
  allowedFormats = [
    "core/bold", // 太字
    "core/italic", // 斜体
    "core/link", // リンク
    "core/strikethrough", // 打ち消し線
    "core/underline", // 下線
    "core/text-color", // テキスト色
    "core/code" // インラインコード
  ]
}) => {
  
  const { caption, title, description, titleTagName } = attributes;

  // レスポンシブタブコンテキスト
  const responsiveTabContext = useResponsiveTab();
  const [currentDeviceTab, setCurrentDeviceTab] = useState("pc");

  useEffect(() => {
    if (responsiveTabContext && responsiveTabContext.activeTab) {
      setCurrentDeviceTab(responsiveTabContext.activeTab);
    }
  }, [responsiveTabContext?.activeTab]);

  // 現在のタブに基づいてフォントサイズを取得
  const getCurrentFontSize = (type) => {
    return getDirectFontSize(attributes, type, currentDeviceTab);
  };

  // CSS変数を生成
  const cssVariables = getTextBasicCSSVariables(attributes);

  return (
    <div
      className={className}
      style={{
        ...cssVariables,
        ...style
      }}
      data-device-tab={currentDeviceTab}
      data-caption-font-size-pc={cssVariables["--caption-font-size-pc"]}
      data-caption-font-size-sp={cssVariables["--caption-font-size-sp"]}
      data-title-font-size-pc={cssVariables["--title-font-size-pc"]}
      data-title-font-size-sp={cssVariables["--title-font-size-sp"]}
      data-description-font-size-pc={cssVariables["--description-font-size-pc"]}
      data-description-font-size-sp={cssVariables["--description-font-size-sp"]}
    >
      {showCaption && (
        <RichText
          tagName="div"
          className={`${className}__caption`}
          value={caption}
          onChange={(newCaption) => setAttributes({ caption: newCaption })}
          placeholder={captionPlaceholder}
          keepPlaceholderOnFocus={true}
          allowedFormats={allowedFormats}
          style={{
            fontSize: getCurrentFontSize("caption"),
          }}
        />
      )}
      
      {showTitle && (
        <RichText
          tagName={titleTagName || "h2"}
          className={`${className}__title`}
          value={title}
          onChange={(newTitle) => setAttributes({ title: newTitle })}
          placeholder={titlePlaceholder}
          keepPlaceholderOnFocus={true}
          allowedFormats={allowedFormats}
          style={{
            fontSize: getCurrentFontSize("title"),
          }}
        />
      )}
      
      {showDescription && (
        <RichText
          tagName="p"
          className={`${className}__description`}
          value={description}
          onChange={(newDescription) => setAttributes({ description: newDescription })}
          placeholder={descriptionPlaceholder}
          keepPlaceholderOnFocus={true}
          allowedFormats={allowedFormats}
          style={{
            fontSize: getCurrentFontSize("description"),
          }}
        />
      )}
    </div>
  );
};

/**
 * フロントエンド表示用のテキストコンポーネント（save.js用）
 *
 * @param {Object} props コンポーネントのプロパティ
 * @param {Object} props.attributes ブロックの属性
 * @param {string} props.className テキストコンテナのクラス名
 * @param {Object} props.style 追加のスタイル（オプション）
 * @param {boolean} props.showCaption キャプションを表示するか
 * @param {boolean} props.showTitle タイトルを表示するか
 * @param {boolean} props.showDescription 説明を表示するか
 * @returns {JSX.Element} テキスト表示要素
 */
export const TextBasicSave = ({ 
  attributes, 
  className = "text-basic",
  style = {},
  showCaption = true,
  showTitle = true,
  showDescription = true
}) => {
  
  const { caption, title, description, titleTagName } = attributes;

  // CSS変数を生成
  const cssVariables = getTextBasicCSSVariables(attributes);

  return (
    <div
      className={className}
      style={{
        ...cssVariables,
        ...style
      }}
      data-caption-font-size-pc={cssVariables["--caption-font-size-pc"]}
      data-caption-font-size-sp={cssVariables["--caption-font-size-sp"]}
      data-title-font-size-pc={cssVariables["--title-font-size-pc"]}
      data-title-font-size-sp={cssVariables["--title-font-size-sp"]}
      data-description-font-size-pc={cssVariables["--description-font-size-pc"]}
      data-description-font-size-sp={cssVariables["--description-font-size-sp"]}
    >
      {showCaption && caption && (
        <RichText.Content
          tagName="div"
          className={`${className}__caption`}
          value={caption}
        />
      )}
      
      {showTitle && title && (
        <RichText.Content
          tagName={titleTagName || "h2"}
          className={`${className}__title`}
          value={title}
        />
      )}
      
      {showDescription && description && (
        <RichText.Content
          tagName="p"
          className={`${className}__description`}
          value={description}
        />
      )}
    </div>
  );
};

export default TextBasicRender;
