"use client";
/*
 * Documentation:
 * Text Input — https://app.subframe.com/f023064a5ca0/library?component=Text+Input_be48ca43-f8e7-4c0e-8870-d219ea11abfe
 */

import React from "react";
import { FeatherEye } from "@subframe/core";
import { FeatherEyeOff } from "@subframe/core";
import { FeatherLock } from "@subframe/core";
import { FeatherPlus } from "@subframe/core";
import { FeatherSearch } from "@subframe/core";
import * as SubframeCore from "@subframe/core";
import * as SubframeUtils from "../../utils";

// @subframe/sync-disable -- local fix: Context, ueber den der PasswordEyeButton (im Root) die Sichtbarkeit
// des Passworts steuert. Davids Komponente hatte den Eye-Button rein dekorativ (kein Toggle).
const TextInputContext = React.createContext<{
  showPassword: boolean;
  togglePassword: () => void;
}>({ showPassword: false, togglePassword: () => {} });

export interface InputProps
  extends Omit<
    React.InputHTMLAttributes<HTMLInputElement>,
    "type" | "placeholder" | "value"
  > {
  type?: "text" | "password" | "email" | "number" | "tel" | "url" | "search";
  placeholder?: React.ReactNode;
  variant?: "regular" | "small" | "extra-small";
  value?: React.ReactNode;
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
  className?: string;
}

const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(
  {
    type = "text",
    placeholder,
    variant = "regular",
    value,
    className,
    ...otherProps
  }: InputProps,
  ref
) {
  // @subframe/sync-disable -- local fix: Password-Reveal via Context; boxShadow:none entfernt den geerbten
  // nativen Fokus-Ring (der Fokus-Glow gehoert ans Feld, nicht an den Input -> kein Doppelrahmen).
  const { showPassword } = React.useContext(TextInputContext);
  const nativeType =
    type === "password" && showPassword
      ? "text"
      : type === "search"
      ? "search"
      : type === "url"
      ? "url"
      : type === "tel"
      ? "tel"
      : type === "number"
      ? "number"
      : type === "email"
      ? "email"
      : type === "password"
      ? "password"
      : "text";
  return (
    <input
      className={SubframeUtils.twClassNames(
        "group/b0d608f7 h-full w-full border-none bg-transparent px-0 py-0 text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-secondary outline-none placeholder:text-text-neutral-subtle",
        {
          "text-body-extra-small-regular-0 font-body-extra-small-regular-0":
            variant === "extra-small",
          "text-body-small-regular-0 font-body-small-regular-0":
            variant === "small",
        },
        className
      )}
      style={{ boxShadow: "none" }}
      placeholder={placeholder as string}
      value={value as string}
      ref={ref}
      type={nativeType}
      {...otherProps}
    />
  );
});

export interface PasswordEyeButtonProps
  extends React.HTMLAttributes<HTMLDivElement> {
  showPassword?: boolean;
  className?: string;
}

const PasswordEyeButton = React.forwardRef<
  HTMLDivElement,
  PasswordEyeButtonProps
>(function PasswordEyeButton(
  { showPassword = false, className, ...otherProps }: PasswordEyeButtonProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "group/39db4fac flex h-5 w-5 cursor-pointer flex-col items-center justify-center gap-4",
        className
      )}
      ref={ref}
      {...otherProps}
    >
      {showPassword ? (
        <FeatherEye className="text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-primary group-hover/39db4fac:text-body-large-0 group-hover/39db4fac:font-body-large-0 group-active/39db4fac:text-body-default-regular-0 group-active/39db4fac:font-body-default-regular-0" />
      ) : (
        <FeatherEyeOff className="text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-primary group-hover/39db4fac:text-body-large-0 group-hover/39db4fac:font-body-large-0 group-active/39db4fac:text-body-default-regular-0 group-active/39db4fac:font-body-default-regular-0" />
      )}
    </div>
  );
});

export interface TextInputRootProps
  extends React.LabelHTMLAttributes<HTMLLabelElement> {
  disabled?: boolean;
  error?: boolean;
  variant?: "outline" | "filled";
  size?: "small" | "medium" | "large";
  fillContainer?: boolean;
  borderless?: boolean;
  noPadding?: boolean;
  showLabel?: boolean;
  label?: React.ReactNode;
  helpText?: React.ReactNode;
  icon?: React.ReactNode;
  iconRight?: React.ReactNode;
  type?: "text" | "password" | "email" | "number" | "tel" | "url" | "search";
  children?: React.ReactNode;
  className?: string;
}

const TextInputRoot = React.forwardRef<HTMLLabelElement, TextInputRootProps>(
  function TextInputRoot(
    {
      disabled = false,
      error = false,
      variant = "outline",
      size = "medium",
      fillContainer = false,
      borderless = false,
      noPadding = false,
      showLabel = false,
      label,
      helpText,
      icon = null,
      iconRight = null,
      type = "text",
      children,
      className,
      ...otherProps
    }: TextInputRootProps,
    ref
  ) {
    // @subframe/sync-disable -- local fix: Password-Sichtbarkeits-State; der Eye-Button toggelt, der Input liest via Context.
    const [showPassword, setShowPassword] = React.useState(false);
    return (
      <TextInputContext.Provider value={{ showPassword, togglePassword: () => setShowPassword((v) => !v) }}>
      <label
        className={SubframeUtils.twClassNames(
          "group/be48ca43 flex h-full w-full min-w-[192px] max-w-[320px] cursor-pointer flex-col items-start justify-center gap-4",
          { "max-w-none": fillContainer },
          className
        )}
        ref={ref}
        {...otherProps}
      >
        <div
          className={SubframeUtils.twClassNames(
            "hidden flex-col items-start gap-3",
            { flex: showLabel }
          )}
        >
          {label ? (
            <span
              className={SubframeUtils.twClassNames(
                "text-body-default-medium-0 font-body-default-medium-0 text-text-neutral-secondary",
                {
                  "text-text-feedback-negative": error,
                  "text-text-neutral-disabled": disabled,
                }
              )}
            >
              {label}
            </span>
          ) : null}
          {helpText ? (
            <span
              className={SubframeUtils.twClassNames(
                "text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-tertiary",
                {
                  "text-text-feedback-negative": error,
                  "text-text-neutral-disabled": disabled,
                }
              )}
            >
              {helpText}
            </span>
          ) : null}
        </div>
        <div
          className={SubframeUtils.twClassNames(
            "flex h-9 w-full min-w-[80px] flex-none items-center gap-2 rounded-sm border border-solid border-border-strong bg-surface-neutral-primary px-3 group-hover/be48ca43:border group-hover/be48ca43:border-solid group-hover/be48ca43:border-brand-brand-border-solid-hover group-hover/be48ca43:bg-surface-neutral-secondary group-focus-within/be48ca43:bg-surface-neutral-secondary group-focus-within/be48ca43:shadow-focus",
            {
              "h-auto px-0 py-0": noPadding,
              "border-none bg-transparent group-hover/be48ca43:border-none group-hover/be48ca43:bg-surface-neutral-modal":
                borderless,
              "h-12 min-w-[96px]": size === "large",
              "h-8": size === "small",
              "bg-surface-neutral-secondary": variant === "filled",
              "border border-solid border-border-negative-solid group-hover/be48ca43:border group-hover/be48ca43:border-solid group-hover/be48ca43:border-border-negative-solid group-focus-within/be48ca43:border-2 group-focus-within/be48ca43:border-solid group-focus-within/be48ca43:border-border-negative-solid group-focus-within/be48ca43:shadow-none":
                error,
              "border border-solid border-border-disabled bg-surface-neutral-disabled group-hover/be48ca43:border group-hover/be48ca43:border-solid group-hover/be48ca43:border-border-disabled group-hover/be48ca43:bg-surface-neutral-disabled group-focus-within/be48ca43:bg-surface-neutral-disabled group-focus-within/be48ca43:shadow-none":
                disabled,
            }
          )}
        >
          <div className="flex grow shrink-0 basis-0 items-center self-stretch">
            <div
              className={SubframeUtils.twClassNames(
                "hidden items-center gap-2 pr-2",
                { flex: type === "search" || type === "password" }
              )}
            >
              {type === "search" ? (
                <FeatherSearch className="text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary" />
              ) : type === "password" ? (
                <FeatherLock className="text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary" />
              ) : (
                <FeatherPlus className="text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary" />
              )}
              {icon ? (
                <SubframeCore.IconWrapper
                  className={SubframeUtils.twClassNames(
                    "text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary",
                    { "text-icon-neutral-disabled": disabled }
                  )}
                >
                  {icon}
                </SubframeCore.IconWrapper>
              ) : null}
            </div>
            {children ? (
              <div className="flex grow shrink-0 basis-0 flex-col items-start self-stretch">
                {children}
              </div>
            ) : null}
            <div
              className={SubframeUtils.twClassNames(
                "hidden items-center gap-1 pl-2",
                { "px-0 py-0": noPadding, "pl-0 pr-2.5": size === "small" }
              )}
            >
              {iconRight ? (
                <SubframeCore.IconWrapper
                  className={SubframeUtils.twClassNames(
                    "text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary",
                    {
                      "text-icon-feedback-negative": error,
                      "text-icon-neutral-disabled": disabled,
                    }
                  )}
                >
                  {iconRight}
                </SubframeCore.IconWrapper>
              ) : null}
            </div>
          </div>
          <PasswordEyeButton
            showPassword={showPassword}
            onClick={() => setShowPassword((v) => !v)}
            className={SubframeUtils.twClassNames("hidden", {
              flex: type === "password",
            })}
          />
        </div>
      </label>
      </TextInputContext.Provider>
    );
  }
);

export const TextInput = Object.assign(TextInputRoot, {
  Input,
  PasswordEyeButton,
});