/**
 * FontTextShadowSetting
 *
 * テキストシャドウ設定用のコンポーネント
 * element-text-basicから抽出したテキストシャドウ設定機能
 */

import { __ } from "@wordpress/i18n";
import { SelectControl, RangeControl } from "@wordpress/components";
import CustomColorPalette, { hexToRgba } from "../../CustomColorPalette";
import StyledToggle from "../../StyledToggle";

/**
 * FontTextShadowSetting Component
 *
 * @param {Object} props
 * @param {Object} props.attributes - ブロックの属性
 * @param {Function} props.setAttributes - 属性を更新する関数
 * @param {string} props.label - ラベルテキスト（オプション）
 * @returns {JSX.Element}
 */
const FontTextShadowSetting = ({ attributes, setAttributes, label }) => {
  const isEnabled = attributes.textShadowEnabled || false;
  const offsetX = attributes.textShadowOffsetX || "0";
  const offsetXUnit = attributes.textShadowOffsetXUnit || "px";
  const offsetY = attributes.textShadowOffsetY || "0";
  const offsetYUnit = attributes.textShadowOffsetYUnit || "px";
  const blur = attributes.textShadowBlur || "1";
  const blurUnit = attributes.textShadowBlurUnit || "px";
  const color = attributes.textShadowColor || "#000000";
  const colorAlpha = attributes.textShadowColorAlpha !== undefined ? attributes.textShadowColorAlpha : 1;

  const unitOptions = [
    { label: "px", value: "px" },
    { label: "em", value: "em" },
    { label: "rem", value: "rem" },
    { label: "%", value: "%" },
  ];

  return (
    <div className="zenblocks-inspector-font-text-shadow">
      <StyledToggle label={label || __("Text Shadow", "zenblocks")} checked={isEnabled} onChange={(value) => setAttributes({ textShadowEnabled: value })} />

      {isEnabled && (
        <div style={{ marginTop: "12px", paddingLeft: "0px" }}>
          <CustomColorPalette
            color={color}
            alpha={colorAlpha}
            enableGradient={false}
            enableAlpha={true}
            onColorChange={(value) => setAttributes({ textShadowColor: value || "#000000" })}
            onAlphaChange={(value) => setAttributes({ textShadowColorAlpha: value })}
            label={__("Color", "zenblocks")}
          />

          <div style={{ marginBottom: "8px" }}>
            <label style={{ display: "block", paddingLeft: "6px", marginBottom: "0px", fontSize: "11px", fontWeight: "500", textTransform: "uppercase" }}>{__("Blur", "zenblocks")}</label>
            <div style={{ display: "flex", alignItems: "flex-end", gap: "8px" }}>
              <div style={{ flex: 1 }}>
                <RangeControl value={parseInt(blur, 10) || 0} onChange={(value) => setAttributes({ textShadowBlur: String(value) })} min={0} max={50} step={1} withInputField={true} />
              </div>
              <div style={{ minWidth: "60px" }}>
                <SelectControl value={blurUnit} options={unitOptions} onChange={(value) => setAttributes({ textShadowBlurUnit: value })} />
              </div>
            </div>
          </div>

          <div style={{ marginBottom: "8px" }}>
            <label style={{ display: "block", paddingLeft: "6px", marginBottom: "0px", fontSize: "11px", fontWeight: "500", textTransform: "uppercase" }}>{__("Horizontal", "zenblocks")}</label>
            <div style={{ display: "flex", alignItems: "flex-end", gap: "8px" }}>
              <div style={{ flex: 1 }}>
                <RangeControl value={parseInt(offsetX, 10) || 0} onChange={(value) => setAttributes({ textShadowOffsetX: String(value) })} min={-50} max={50} step={1} withInputField={true} />
              </div>
              <div style={{ minWidth: "60px" }}>
                <SelectControl value={offsetXUnit} options={unitOptions} onChange={(value) => setAttributes({ textShadowOffsetXUnit: value })} />
              </div>
            </div>
          </div>

          <div style={{ marginBottom: "16px" }}>
            <label style={{ display: "block", paddingLeft: "6px", marginBottom: "0px", fontSize: "11px", fontWeight: "500", textTransform: "uppercase" }}>{__("Vertical", "zenblocks")}</label>
            <div style={{ display: "flex", alignItems: "flex-end", gap: "8px" }}>
              <div style={{ flex: 1 }}>
                <RangeControl value={parseInt(offsetY, 10) || 0} onChange={(value) => setAttributes({ textShadowOffsetY: String(value) })} min={-50} max={50} step={1} withInputField={true} />
              </div>
              <div style={{ minWidth: "60px" }}>
                <SelectControl value={offsetYUnit} options={unitOptions} onChange={(value) => setAttributes({ textShadowOffsetYUnit: value })} />
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

/**
 * テキストシャドウの値を生成するヘルパー関数
 * @param {Object} attributes - ブロックの属性
 * @returns {string} CSS用のtext-shadow値
 */
export const getTextShadowValue = (attributes) => {
  if (!attributes.textShadowEnabled) return undefined;

  const offsetX = attributes.textShadowOffsetX || "0";
  const offsetXUnit = attributes.textShadowOffsetXUnit || "px";
  const offsetY = attributes.textShadowOffsetY || "0";
  const offsetYUnit = attributes.textShadowOffsetYUnit || "px";
  const blur = attributes.textShadowBlur || "1";
  const blurUnit = attributes.textShadowBlurUnit || "px";
  const color = attributes.textShadowColor || "#000000";
  const colorAlpha = attributes.textShadowColorAlpha !== undefined ? attributes.textShadowColorAlpha : 1;

  const colorWithAlpha = hexToRgba(color, colorAlpha);

  return `${offsetX}${offsetXUnit} ${offsetY}${offsetYUnit} ${blur}${blurUnit} ${colorWithAlpha}`;
};

export default FontTextShadowSetting;
