/**
 * Icon Style Controls
 * 
 * アイコンのスタイル設定コントロール（サイズ、カラー、ストロークなど）
 */

import { useState } from "@wordpress/element";
import { BaseControl, RangeControl, ToggleControl, ColorPicker, Dropdown, ColorPalette } from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import { ResponsiveTabProvider } from "../../ResponsiveTabContext";
import ResponsiveControl from "../../ResponsiveControl";

/**
 * アイコンサイズコントロール
 */
export const IconSizeControl = ({
  iconSizePC,
  iconSizeSP,
  onIconSizePCChange,
  onIconSizeSPChange,
  inheritSizes,
  onInheritSizesChange,
  activeTab
}) => {
  return (
    <ResponsiveControl>
      {(activeTab) => (
        <div style={{ marginBottom: "16px" }}>
          <BaseControl
            label={activeTab === "pc" ? __("PC Icon Size", "zenblocks") : __("SP Icon Size", "zenblocks")}
            className="icon-size-control"
          >
            <div style={{ marginBottom: "8px" }}>
              <ToggleControl
                label={__("Inherit from text size", "zenblocks")}
                checked={activeTab === "pc" ? inheritSizes?.pc : inheritSizes?.mobile}
                onChange={(checked) => {
                  const newInheritSizes = { ...inheritSizes };
                  if (activeTab === "pc") {
                    newInheritSizes.pc = checked;
                  } else {
                    newInheritSizes.mobile = checked;
                  }
                  onInheritSizesChange?.(newInheritSizes);
                }}
              />
            </div>

            {!(activeTab === "pc" ? inheritSizes?.pc : inheritSizes?.mobile) && (
              <RangeControl
                value={activeTab === "pc" ? iconSizePC || 24 : iconSizeSP || 18}
                onChange={(value) => {
                  if (activeTab === "pc") {
                    onIconSizePCChange?.(value);
                  } else {
                    onIconSizeSPChange?.(value);
                  }
                }}
                min={8}
                max={100}
                step={1}
                initialPosition={activeTab === "pc" ? 24 : 18}
                allowReset={true}
                resetFallbackValue={activeTab === "pc" ? 24 : 18}
              />
            )}
          </BaseControl>
        </div>
      )}
    </ResponsiveControl>
  );
};

/**
 * アイコンカラーコントロール
 */
export const IconColorControl = ({
  color,
  onColorChange,
  label = __("Icon Color", "zenblocks")
}) => {
  // 透明色のカスタムパレット
  const customColors = [
    { name: "透明", color: "transparent" },
    { name: "黒", color: "#000000" },
    { name: "白", color: "#ffffff" },
    { name: "グレー", color: "#666666" },
    { name: "赤", color: "#ff0000" },
    { name: "青", color: "#0000ff" },
    { name: "緑", color: "#00ff00" },
  ];

  const handleColorChange = (value) => {
    // クリアボタンが押された場合、transparentを設定
    if (value === undefined || value === null) {
      onColorChange?.("transparent");
    } else {
      onColorChange?.(value);
    }
  };

  return (
    <div className="icon-color-control" style={{ marginBottom: "16px" }}>
      <BaseControl label={label}>
        <ColorPalette
          value={color === "transparent" ? undefined : color}
          onChange={handleColorChange}
          disableCustomColors={false}
          clearable={true}
          colors={customColors}
        />
        {color === "transparent" && (
          <div
            style={{
              marginTop: "8px",
              padding: "8px",
              backgroundColor: "#f0f0f0",
              borderRadius: "4px",
              fontSize: "12px",
              color: "#666",
            }}
          >
            現在の設定: 透明
          </div>
        )}
      </BaseControl>
    </div>
  );
};

/**
 * ストローク幅コントロール（Lucideアイコン用）
 */
export const StrokeWidthControl = ({
  strokeWidth,
  onStrokeWidthChange,
  iconValue
}) => {
  // Lucideアイコンのみ表示
  if (!iconValue || !iconValue.startsWith("lucide-")) {
    return null;
  }

  return (
    <div className="stroke-width-control" style={{ marginBottom: "16px" }}>
      <BaseControl label={__("Stroke Width", "zenblocks")}>
        <RangeControl
          value={strokeWidth || 1.75}
          onChange={onStrokeWidthChange}
          min={0.5}
          max={4}
          step={0.25}
          initialPosition={1.75}
          allowReset={true}
          resetFallbackValue={1.75}
        />
      </BaseControl>
    </div>
  );
};

/**
 * アイコンプレビュー
 */
export const IconPreview = ({
  iconValue,
  color,
  strokeWidth,
  size,
  renderFunction
}) => {
  if (!iconValue || !renderFunction) {
    return null;
  }

  return (
    <div
      className="icon-preview"
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        width: "60px",
        height: "60px",
        border: "1px solid #ddd",
        borderRadius: "4px",
        backgroundColor: "#f9f9f9",
        marginBottom: "16px",
      }}
      dangerouslySetInnerHTML={{
        __html: renderFunction(iconValue, color || "#333333", strokeWidth || 1.75),
      }}
    />
  );
};

/**
 * 統合されたアイコンスタイルコントロール
 */
export const IconStyleControls = ({
  iconValue,
  color,
  strokeWidth,
  iconSizePC,
  iconSizeSP,
  inheritSizes,
  onColorChange,
  onStrokeWidthChange,
  onIconSizePCChange,
  onIconSizeSPChange,
  onInheritSizesChange,
  renderFunction,
  activeTab = "pc"
}) => {
  return (
    <div className="icon-style-controls">
      {/* アイコンサイズ */}
      <IconSizeControl
        iconSizePC={iconSizePC}
        iconSizeSP={iconSizeSP}
        onIconSizePCChange={onIconSizePCChange}
        onIconSizeSPChange={onIconSizeSPChange}
        inheritSizes={inheritSizes}
        onInheritSizesChange={onInheritSizesChange}
        activeTab={activeTab}
      />

      {/* アイコンカラー */}
      <IconColorControl
        color={color}
        onColorChange={onColorChange}
      />

      {/* ストローク幅（Lucideのみ） */}
      <StrokeWidthControl
        strokeWidth={strokeWidth}
        onStrokeWidthChange={onStrokeWidthChange}
        iconValue={iconValue}
      />
    </div>
  );
};
