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

const FontTextShadowSettingV2 = ({ attributes, setAttributes, attrName, label }) => {
  const shadowData = attributes[attrName] || {
    pc: { offsetX: "", offsetXUnit: "px", offsetY: "", offsetYUnit: "px", blur: "", blurUnit: "px", color: "", colorAlpha: 1 },
    md: { offsetX: "", offsetXUnit: "", offsetY: "", offsetYUnit: "", blur: "", blurUnit: "", color: "", colorAlpha: "" },
    tb: { offsetX: "", offsetXUnit: "", offsetY: "", offsetYUnit: "", blur: "", blurUnit: "", color: "", colorAlpha: "" },
    sp: { offsetX: "", offsetXUnit: "", offsetY: "", offsetYUnit: "", blur: "", blurUnit: "", color: "", colorAlpha: "" },
  };

  const [isEnabled, setIsEnabled] = useState(() => {
    const pc = shadowData.pc || {};
    return !!(pc.offsetX || pc.offsetY || pc.blur || pc.color);
  });

  const currentValues = shadowData.pc || { offsetX: "", offsetXUnit: "px", offsetY: "", offsetYUnit: "px", blur: "", blurUnit: "px", color: "", colorAlpha: 1 };

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

  const updateShadow = (key, value) => {
    const newData = {
      ...shadowData,
      pc: {
        ...shadowData.pc,
        [key]: value,
      },
    };
    setAttributes({ [attrName]: newData });
  };

  const handleToggle = (enabled) => {
    setIsEnabled(enabled);
    if (!enabled) {
      setAttributes({
        [attrName]: {
          pc: { offsetX: "", offsetXUnit: "px", offsetY: "", offsetYUnit: "px", blur: "", blurUnit: "px", color: "", colorAlpha: 1 },
          md: { offsetX: "", offsetXUnit: "", offsetY: "", offsetYUnit: "", blur: "", blurUnit: "", color: "", colorAlpha: "" },
          tb: { offsetX: "", offsetXUnit: "", offsetY: "", offsetYUnit: "", blur: "", blurUnit: "", color: "", colorAlpha: "" },
          sp: { offsetX: "", offsetXUnit: "", offsetY: "", offsetYUnit: "", blur: "", blurUnit: "", color: "", colorAlpha: "" },
        },
      });
    }
  };

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

      {isEnabled && (
        <div style={{ marginTop: "12px", paddingLeft: "0px" }}>
          <CustomColorPalette
            color={currentValues.color || "#000000"}
            alpha={currentValues.colorAlpha !== "" && currentValues.colorAlpha !== undefined ? currentValues.colorAlpha : 1}
            enableGradient={false}
            enableAlpha={true}
            onColorChange={(value) => updateShadow("color", value || "#000000")}
            onAlphaChange={(value) => updateShadow("colorAlpha", 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(currentValues.blur, 10) || 0}
                  onChange={(value) => updateShadow("blur", String(value))}
                  min={0}
                  max={50}
                  step={1}
                  withInputField={true}
                />
              </div>
              <div style={{ minWidth: "60px" }}>
                <SelectControl
                  value={currentValues.blurUnit || "px"}
                  options={unitOptions}
                  onChange={(value) => updateShadow("blurUnit", 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(currentValues.offsetX, 10) || 0}
                  onChange={(value) => updateShadow("offsetX", String(value))}
                  min={-50}
                  max={50}
                  step={1}
                  withInputField={true}
                />
              </div>
              <div style={{ minWidth: "60px" }}>
                <SelectControl
                  value={currentValues.offsetXUnit || "px"}
                  options={unitOptions}
                  onChange={(value) => updateShadow("offsetXUnit", 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(currentValues.offsetY, 10) || 0}
                  onChange={(value) => updateShadow("offsetY", String(value))}
                  min={-50}
                  max={50}
                  step={1}
                  withInputField={true}
                />
              </div>
              <div style={{ minWidth: "60px" }}>
                <SelectControl
                  value={currentValues.offsetYUnit || "px"}
                  options={unitOptions}
                  onChange={(value) => updateShadow("offsetYUnit", value)}
                />
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default FontTextShadowSettingV2;
