/**
 * IconSizeSetting
 *
 * アイコンサイズ設定用のコンポーネント
 * element-text-basicから抽出したアイコンサイズ設定機能
 */

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

/**
 * IconSizeSetting Component
 *
 * @param {Object} props
 * @param {Object} props.attributes - ブロックの属性
 * @param {Function} props.setAttributes - 属性を更新する関数
 * @param {string} props.title - パネルタイトル
 * @param {boolean} props.initialOpen - 初期開閉状態
 * @param {boolean} props.panelState - パネル状態
 * @param {Function} props.onTogglePanel - パネルトグル関数
 * @returns {JSX.Element}
 */
const IconSizeSetting = ({ attributes, setAttributes, title, initialOpen = false, panelState, onTogglePanel }) => {
  const { iconSize, iconSizeUnit, useResponsiveIconSize } = attributes;

  return (
    <PanelBody title={title || __("Icon Size", "zenblocks")} initialOpen={initialOpen || panelState} onToggle={onTogglePanel}>
      <ResponsiveControl>
        {(activeTab) => {
          const deviceSuffix = activeTab.toUpperCase();
          const currentSize = useResponsiveIconSize ? attributes[`iconSize${deviceSuffix}`] || iconSize || 25 : iconSize || 25;
          const currentUnit = useResponsiveIconSize ? attributes[`iconSizeUnit${deviceSuffix}`] || iconSizeUnit || "px" : iconSizeUnit || "px";

          return (
            <div style={{ display: "flex", alignItems: "flex-end", gap: "8px" }}>
              <div style={{ flex: 1 }}>
                <RangeControl
                  value={currentSize}
                  onChange={(value) => {
                    const attributeName = useResponsiveIconSize ? `iconSize${deviceSuffix}` : "iconSize";
                    setAttributes({ [attributeName]: value });
                  }}
                  min={12}
                  max={250}
                  step={1}
                />
              </div>
              <div style={{ minWidth: "40px" }}>
                <SelectControl
                  value={currentUnit}
                  options={[
                    { label: "px", value: "px" },
                    { label: "em", value: "em" },
                    { label: "rem", value: "rem" },
                  ]}
                  onChange={(unit) => {
                    const attributeName = useResponsiveIconSize ? `iconSizeUnit${deviceSuffix}` : "iconSizeUnit";
                    setAttributes({ [attributeName]: unit });
                  }}
                />
              </div>
            </div>
          );
        }}
      </ResponsiveControl>
    </PanelBody>
  );
};

/**
 * 現在のアイコンサイズを取得するヘルパー関数
 * @param {Object} attributes - ブロックの属性
 * @param {string} device - デバイス（pc/sp）
 * @returns {string} アイコンサイズ値
 */
export const getCurrentIconSize = (attributes, device = "pc") => {
  if (!attributes) return "inherit";

  const { iconSize, iconSizeUnit, iconSizePC, iconSizeSP, iconSizeUnitPC, iconSizeUnitSP } = attributes;

  const isPC = device === "pc";

  // inherit状態の確認
  const isInherit = isPC ? iconSizePC === "inherit" || (!iconSizePC && iconSize === "inherit") : iconSizeSP === "inherit" || (!iconSizeSP && iconSize === "inherit");

  if (isInherit) {
    return "inherit";
  }

  // 現在のサイズと単位を取得
  const currentSize = isPC ? iconSizePC || iconSize || 24 : iconSizeSP || iconSize || 18;
  const currentUnit = isPC ? iconSizeUnitPC || iconSizeUnit || "px" : iconSizeUnitSP || iconSizeUnit || "px";

  return `${currentSize}${currentUnit}`;
};

/**
 * アイコンサイズの値を取得するヘルパー関数（CSS出力用）
 * @param {Object} attributes - ブロックの属性
 * @param {string} device - デバイス（pc/sp）
 * @returns {string} CSS用のアイコンサイズ値
 */
export const getIconSizeValue = (attributes, device = "pc") => {
  if (!attributes) return "inherit";

  const { iconSize, iconSizeUnit, iconSizePC, iconSizeSP, iconSizeUnitPC, iconSizeUnitSP } = attributes;

  // 安全な値を確保するヘルパー関数
  const safeValue = (value, fallback = null) => {
    if (value === undefined || value === null || value === 0) return fallback;
    return value;
  };

  let size, unit;

  // PCから取得する場合
  if (device === "pc") {
    size = safeValue(iconSizePC, safeValue(iconSize));
    unit = iconSizeUnitPC || iconSizeUnit || "px";
  }
  // SPから取得する場合
  else if (device === "sp") {
    // SP用の独自設定があればそれを返す
    size = safeValue(iconSizeSP);
    unit = iconSizeUnitSP || "px";

    // SPの設定がない場合はPCの設定をフォールバックとして使用
    if (size === null) {
      size = safeValue(iconSizePC, safeValue(iconSize));
      unit = iconSizeUnitPC || iconSizeUnit || "px";
    }
  }

  // inherit状態の場合
  if (size === "inherit") {
    return "inherit";
  }

  // サイズが未設定の場合は1emを返す（テキストサイズと同じ）
  if (size === null) {
    return "1em";
  }

  return `${size}${unit}`;
};

export default IconSizeSetting;
