// src/components/Input/Input.tsx
import { WarningCircle, Eye, EyeSlash } from "phosphor-react";
import {
  forwardRef,
  useState,
  useId,
  useMemo
} from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var SIZE_CLASSES = {
  small: "text-sm",
  medium: "text-md",
  large: "text-lg",
  "extra-large": "text-xl"
};
var STATE_CLASSES = {
  default: "border-border-300 placeholder:text-text-600 hover:border-border-400",
  error: "border-2 border-indicator-error placeholder:text-text-600",
  disabled: "border-border-300 placeholder:text-text-600 cursor-not-allowed opacity-40",
  "read-only": "border-transparent !text-text-600 cursor-default focus:outline-none bg-transparent"
};
var VARIANT_CLASSES = {
  outlined: "border rounded-lg",
  underlined: "border-0 border-b rounded-none bg-transparent focus:outline-none focus:border-primary-950 focus:border-b-2",
  rounded: "border rounded-full"
};
var getActualState = (disabled, readOnly, errorMessage, state) => {
  if (disabled) return "disabled";
  if (readOnly) return "read-only";
  if (errorMessage) return "error";
  return state || "default";
};
var getIconSize = (size) => {
  const iconSizeClasses = {
    small: "w-4 h-4",
    medium: "w-5 h-5",
    large: "w-6 h-6",
    "extra-large": "w-7 h-7"
  };
  return iconSizeClasses[size] || iconSizeClasses.medium;
};
var getPasswordToggleConfig = (type, disabled, readOnly, showPassword, iconRight) => {
  const isPasswordType = type === "password";
  const shouldShowPasswordToggle = isPasswordType && !disabled && !readOnly;
  let actualIconRight = iconRight;
  let ariaLabel;
  if (shouldShowPasswordToggle) {
    actualIconRight = showPassword ? /* @__PURE__ */ jsx(EyeSlash, {}) : /* @__PURE__ */ jsx(Eye, {});
    ariaLabel = showPassword ? "Ocultar senha" : "Mostrar senha";
  }
  return { shouldShowPasswordToggle, actualIconRight, ariaLabel };
};
var getCombinedClasses = (actualState, variant) => {
  const stateClasses = STATE_CLASSES[actualState];
  const variantClasses = VARIANT_CLASSES[variant];
  if (actualState === "error" && variant === "underlined") {
    return "border-0 border-b-2 border-indicator-error rounded-none bg-transparent focus:outline-none focus:border-primary-950 placeholder:text-text-600";
  }
  if (actualState === "read-only" && variant === "underlined") {
    return "border-0 border-b-0 rounded-none bg-transparent focus:outline-none !text-text-900 cursor-default";
  }
  return `${stateClasses} ${variantClasses}`;
};
var Input = forwardRef(
  ({
    label,
    helperText,
    errorMessage,
    size = "medium",
    variant = "outlined",
    state = "default",
    iconLeft,
    iconRight,
    className = "",
    containerClassName = "",
    disabled,
    readOnly,
    required,
    id,
    type = "text",
    ...props
  }, ref) => {
    const [showPassword, setShowPassword] = useState(false);
    const isPasswordType = type === "password";
    const actualType = isPasswordType && showPassword ? "text" : type;
    const actualState = getActualState(disabled, readOnly, errorMessage, state);
    const sizeClasses = SIZE_CLASSES[size];
    const combinedClasses = useMemo(
      () => getCombinedClasses(actualState, variant),
      [actualState, variant]
    );
    const iconSize = getIconSize(size);
    const baseClasses = `bg-background w-full py-2 ${actualState === "read-only" ? "px-0" : "px-3"} font-normal text-text-900 focus:outline-primary-950`;
    const generatedId = useId();
    const inputId = id ?? `input-${generatedId}`;
    const togglePasswordVisibility = () => setShowPassword(!showPassword);
    const { shouldShowPasswordToggle, actualIconRight, ariaLabel } = getPasswordToggleConfig(
      type,
      disabled,
      readOnly,
      showPassword,
      iconRight
    );
    return /* @__PURE__ */ jsxs("div", { className: `${containerClassName}`, children: [
      label && /* @__PURE__ */ jsxs(
        "label",
        {
          htmlFor: inputId,
          className: `block font-bold text-text-900 mb-1.5 ${sizeClasses}`,
          children: [
            label,
            " ",
            required && /* @__PURE__ */ jsx("span", { className: "text-indicator-error", children: "*" })
          ]
        }
      ),
      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
        iconLeft && /* @__PURE__ */ jsx("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx(
          "span",
          {
            className: `${iconSize} text-text-400 flex items-center justify-center`,
            children: iconLeft
          }
        ) }),
        /* @__PURE__ */ jsx(
          "input",
          {
            ref,
            id: inputId,
            type: actualType,
            className: `${baseClasses} ${sizeClasses} ${combinedClasses} ${iconLeft ? "pl-10" : ""} ${actualIconRight ? "pr-10" : ""} ${className}`,
            disabled,
            readOnly,
            required,
            "aria-invalid": actualState === "error" ? "true" : void 0,
            ...props
          }
        ),
        actualIconRight && (shouldShowPasswordToggle ? /* @__PURE__ */ jsx(
          "button",
          {
            type: "button",
            className: "absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer border-0 bg-transparent p-0",
            onClick: togglePasswordVisibility,
            "aria-label": ariaLabel,
            children: /* @__PURE__ */ jsx(
              "span",
              {
                className: `${iconSize} text-text-400 flex items-center justify-center hover:text-text-600 transition-colors`,
                children: actualIconRight
              }
            )
          }
        ) : /* @__PURE__ */ jsx("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx(
          "span",
          {
            className: `${iconSize} text-text-400 flex items-center justify-center`,
            children: actualIconRight
          }
        ) }))
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "mt-1.5 gap-1.5", children: [
        helperText && /* @__PURE__ */ jsx("p", { className: "text-sm text-text-500", children: helperText }),
        errorMessage && /* @__PURE__ */ jsxs("p", { className: "flex gap-1 items-center text-sm text-indicator-error", children: [
          /* @__PURE__ */ jsx(WarningCircle, { size: 16 }),
          " ",
          errorMessage
        ] })
      ] })
    ] });
  }
);
var Input_default = Input;
export {
  Input_default as default
};
//# sourceMappingURL=index.mjs.map