/**
 * SVGIconSetting Size Controls
 * 
 * アイコンサイズコントロール関連の機能を管理
 */

import { ToggleControl } from "@wordpress/components";
import { __ } from "@wordpress/i18n";

/**
 * アイコンサイズ制御用コンポーネント
 * @param {Object} props - コンポーネントのプロパティ
 * @param {string} props.device - 現在のデバイス（"pc" または "sp"）
 * @param {number} props.iconSizePC - PCのアイコンサイズ
 * @param {number} props.iconSizeSP - SPのアイコンサイズ
 * @param {boolean} props.inheritSizePC - PCでテキストサイズを継承するか
 * @param {boolean} props.inheritSizeSP - SPでテキストサイズを継承するか
 * @param {Function} props.onIconSizePCChange - PCアイコンサイズ変更ハンドラー
 * @param {Function} props.onIconSizeSPChange - SPアイコンサイズ変更ハンドラー
 * @param {Function} props.onInheritSizePCChange - PC継承設定変更ハンドラー
 * @param {Function} props.onInheritSizeSPChange - SP継承設定変更ハンドラー
 * @param {Object} props.inheritSizes - 新しいインターフェース用の継承設定
 * @param {Function} props.onInheritSizesChange - 新しいインターフェース用の継承設定変更ハンドラー
 * @param {boolean} props.useInheritSizes - 新しいインターフェースを使用するか
 */
export const IconSizeControl = ({
  device,
  iconSizePC,
  iconSizeSP,
  inheritSizePC,
  inheritSizeSP,
  onIconSizePCChange,
  onIconSizeSPChange,
  onInheritSizePCChange,
  onInheritSizeSPChange,
  inheritSizes,
  onInheritSizesChange,
  useInheritSizes,
}) => {
  const isPC = device === "pc";
  const currentSize = isPC ? iconSizePC : iconSizeSP;

  // 現在のinheritの値を取得（新しいインターフェース対応）
  const getCurrentInherit = () => {
    if (useInheritSizes) {
      return isPC ? inheritSizes?.pc || false : inheritSizes?.sp || false;
    }
    return isPC ? inheritSizePC : inheritSizeSP;
  };

  // inheritの変更ハンドラー
  const handleInheritChange = (newInherit) => {
    if (useInheritSizes) {
      // 新しいインターフェースを使用
      const newInheritSizes = {
        ...inheritSizes,
        [device]: newInherit,
      };
      onInheritSizesChange(newInheritSizes);
    } else {
      // 従来のインターフェースを使用
      if (isPC && onInheritSizePCChange) {
        onInheritSizePCChange(newInherit);
      } else if (!isPC && onInheritSizeSPChange) {
        onInheritSizeSPChange(newInherit);
      }
    }
  };

  // サイズの変更ハンドラー
  const handleSizeChange = (newSize) => {
    if (isPC && onIconSizePCChange) {
      onIconSizePCChange(newSize);
    } else if (!isPC && onIconSizeSPChange) {
      onIconSizeSPChange(newSize);
    }
  };

  return (
    <div>
      <div style={{ marginBottom: "10px" }}>
        <ToggleControl 
          label={__("Inherit (same as text size)", "zenblocks")} 
          checked={getCurrentInherit()} 
          onChange={handleInheritChange} 
        />
      </div>

      {!getCurrentInherit() && (
        <div>
          <div style={{ fontSize: "12px", color: "#666", marginBottom: "6px" }}>
            {currentSize}px
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
            <span style={{ fontSize: "11px", color: "#666", minWidth: "20px", textAlign: "center" }}>
              12
            </span>
            <input
              type="range"
              min="12"
              max="250"
              step="2"
              value={currentSize}
              onChange={(e) => {
                const newValue = parseInt(e.target.value, 10);
                handleSizeChange(newValue);
              }}
              style={{
                flex: 1,
                height: "6px",
                background: "#e0e0e0",
                outline: "none",
                borderRadius: "3px",
                cursor: "pointer",
                appearance: "none",
                WebkitAppearance: "none",
                border: "none",
              }}
            />
            <span style={{ fontSize: "11px", color: "#666", minWidth: "20px", textAlign: "center" }}>
              250
            </span>
            <div style={{ minWidth: "30px", textAlign: "center", fontSize: "11px", color: "#666" }}>
              <span style={{ fontWeight: "500" }}>px</span>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default IconSizeControl;
