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

import { __ } from "@wordpress/i18n";
import SVGIconSetting, { renderSVGIcon } from "./SVGIconSetting";

/**
 * IconSelectSetting Component
 *
 * @param {Object} props
 * @param {Object} props.attributes - ブロックの属性
 * @param {Function} props.setAttributes - 属性を更新する関数
 * @param {string} props.icon - 現在のアイコン値
 * @param {string} props.iconColor - アイコン色
 * @param {string} props.iconStrokeWidth - アイコンのストローク幅
 * @param {string} props.textColor - テキスト色（初期値設定用）
 * @param {Function} props.getCurrentIconColor - 現在のアイコン色を取得する関数
 * @param {string} props.label - ラベルテキスト（オプション）
 * @returns {JSX.Element}
 */
const IconSelectSetting = ({ 
  attributes, 
  setAttributes, 
  icon, 
  iconColor, 
  iconStrokeWidth, 
  textColor, 
  getCurrentIconColor,
  label 
}) => {
  return (
    <div className="icon-select-setting">
      <SVGIconSetting
        value={icon}
        color={getCurrentIconColor()}
        strokeWidth={iconStrokeWidth || 1.75}
        onChange={(value) => {
          const updates = { icon: value };

          // アイコンを初めて設定する場合の初期値設定
          if (value && value !== "" && (!icon || icon === "")) {
            // アイコン色が未設定の場合、テキスト色を初期値として設定
            if (!iconColor || iconColor === "") {
              updates.iconColor = textColor || "";
            }
            // Lucideアイコン、カスタムSVG、またはSVGを含むアイコンの場合はデフォルトのstroke widthを設定
            if ((value.startsWith("lucide-") || value.startsWith("custom-svg-") || value.includes("svg") || value.includes("custom")) && !iconStrokeWidth) {
              updates.iconStrokeWidth = 1.75;
            }
          }

          setAttributes(updates);
        }}
        onColorChange={(value) => {
          setAttributes({
            iconColor: value,
          });
        }}
        onStrokeWidthChange={(value) => {
          setAttributes({
            iconStrokeWidth: value,
          });
        }}
      />
    </div>
  );
};

/**
 * 現在のアイコン色を取得するヘルパー関数
 * @param {string} icon - アイコン値
 * @param {string} iconColor - アイコン色
 * @param {string} textColor - テキスト色
 * @returns {string} 現在のアイコン色
 */
export const getCurrentIconColor = (icon, iconColor, textColor) => {
  if (!icon || icon === "") return "inherit";

  // アイコン色が設定されている場合はそれを使用
  if (iconColor && iconColor !== "") {
    return iconColor;
  }

  // アイコン色が未設定の場合、テキスト色を使用
  if (textColor && textColor !== "") {
    return textColor;
  }

  // どちらも未設定の場合は、現在のテキスト色を使用
  return "currentColor";
};

// SVGIconのrenderSVGIcon関数も再エクスポート
export { renderSVGIcon };

export default IconSelectSetting;