/**
 * IconPositionSetting
 *
 * アイコン位置設定用のコンポーネント（buttonBasic用）
 * X軸・Y軸の位置調整機能を含む
 */

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

/**
 * IconPositionSetting 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 IconPositionSetting = ({ attributes, setAttributes, title, initialOpen = false, panelState, onTogglePanel }) => {
  const { iconOffsetX, iconOffsetY, useResponsiveIconOffsetX, useResponsiveIconOffsetY } = attributes;

  return (
    <PanelBody title={title || __("Icon Position", "zenblocks")} initialOpen={initialOpen || panelState} onToggle={onTogglePanel}>
      <ResponsiveControl>
        {(activeTab) => {
          const deviceSuffix = activeTab.toUpperCase();
          return (
            <>
              <div style={{ marginBottom: "16px" }}>
                <RangeControl
                  label={__(`X軸位置 ${deviceSuffix} (-100:左端, 0:中央, 100:右端)`, "zenblocks")}
                  value={useResponsiveIconOffsetX ? attributes[`iconOffsetX${deviceSuffix}`] || 0 : iconOffsetX || 0}
                  onChange={(value) => {
                    const attributeName = useResponsiveIconOffsetX ? `iconOffsetX${deviceSuffix}` : "iconOffsetX";
                    setAttributes({ [attributeName]: value });
                  }}
                  min={-100}
                  max={100}
                  step={1}
                />
              </div>
              <div style={{ marginBottom: "16px" }}>
                <RangeControl
                  label={__(`Y軸位置 ${deviceSuffix} (-100:最上部, 0:中央, 100:最下部)`, "zenblocks")}
                  value={useResponsiveIconOffsetY ? attributes[`iconOffsetY${deviceSuffix}`] || 0 : iconOffsetY || 0}
                  onChange={(value) => {
                    const attributeName = useResponsiveIconOffsetY ? `iconOffsetY${deviceSuffix}` : "iconOffsetY";
                    setAttributes({ [attributeName]: value });
                  }}
                  min={-100}
                  max={100}
                  step={1}
                />
              </div>
            </>
          );
        }}
      </ResponsiveControl>
    </PanelBody>
  );
};

/**
 * 現在のアイコン位置を取得するヘルパー関数
 * @param {Object} attributes - ブロックの属性
 * @param {boolean} useResponsiveIconPosition - レスポンシブ設定の有無
 * @param {string} currentDeviceTab - 現在のデバイスタブ
 * @returns {string} 現在のアイコン位置
 */
export const getCurrentIconPosition = (attributes, useResponsiveIconPosition, currentDeviceTab) => {
  const { iconPosition, iconPositionPC, iconPositionSP } = attributes;
  
  if (useResponsiveIconPosition) {
    return currentDeviceTab === "pc" ? iconPositionPC || iconPosition || "left" : iconPositionSP || iconPosition || "left";
  }
  return iconPosition || "left";
};

export default IconPositionSetting;