import { RangeControl } from "@wordpress/components";

interface ButtonSizeControlsProps {
  buttonHeight: number;
  buttonHeightOption: "compact" | "regular" | "custom";
  setAttributes: (attrs: Partial<{ buttonHeight: number; buttonHeightOption: "compact" | "regular" | "custom" }>) => void;
}

export const ButtonSizeControls = ({ buttonHeight, buttonHeightOption, setAttributes }: ButtonSizeControlsProps) => {
  const updateButtonHeightOption = (option: "compact" | "regular" | "custom") => {
    setAttributes({ buttonHeightOption: option });
    if (option === "compact") {
      setAttributes({ buttonHeight: 22 });
    } else if (option === "regular") {
      setAttributes({ buttonHeight: 32 });
    }
  };

  return (
    <div>
      <label className="components-base-control__label">Size</label>
      <div className="scbc-size-grid">
        <button
          className={`scbc-size-option ${buttonHeightOption === "compact" ? "is-selected" : ""}`}
          onClick={() => updateButtonHeightOption("compact")}
        >
          <div className="scbc-size-preview compact-size">
            <span>Compact</span>
          </div>
          <span className="scbc-size-label">22px</span>
        </button>

        <button
          className={`scbc-size-option ${buttonHeightOption === "regular" ? "is-selected" : ""}`}
          onClick={() => updateButtonHeightOption("regular")}
        >
          <div className="scbc-size-preview regular-size">
            <span>Regular</span>
          </div>
          <span className="scbc-size-label">32px</span>
        </button>

        <button
          className={`scbc-size-option ${buttonHeightOption === "custom" ? "is-selected" : ""}`}
          onClick={() => updateButtonHeightOption("custom")}
        >
          <div className="scbc-size-preview custom-size">
            <span>Custom</span>
          </div>
          <span className="scbc-size-label">{buttonHeight}px</span>
        </button>
      </div>

      {buttonHeightOption === "custom" && (
        <div style={{ marginTop: "16px" }}>
          <RangeControl
            label="Custom Height"
            value={buttonHeight}
            onChange={(value: number | undefined) => setAttributes({ buttonHeight: value ?? 32 })}
            min={22}
            max={72}
            help={`Button height: ${buttonHeight}px`}
          />
        </div>
      )}
    </div>
  );
};