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

import React from "react";
import { FeatherCircleDashed } from "@subframe/core";
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";

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

const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(
  { type = "text", placeholder, value, className, ...otherProps }: InputProps,
  ref
) {
  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",
        className
      )}
      placeholder={placeholder as string}
      value={value as string}
      ref={ref}
      type={
        type === "search"
          ? "search"
          : type === "url"
          ? "url"
          : type === "tel"
          ? "tel"
          : type === "number"
          ? "number"
          : type === "email"
          ? "email"
          : type === "password"
          ? "password"
          : "text"
      }
      {...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;
  message?: React.ReactNode;
  icon?: React.ReactNode;
  iconRight?: React.ReactNode;
  type?: "text" | "password" | "email" | "number" | "tel" | "url" | "search";
  children?: React.ReactNode;
  showIconLeft?: boolean;
  showIconRight?: boolean;
  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,
      message,
      icon = <FeatherCircleDashed />,
      iconRight = <FeatherCircleDashed />,
      type = "text",
      children,
      showIconLeft = false,
      showIconRight = false,
      className,
      ...otherProps
    }: TextInputRootProps,
    ref
  ) {
    return (
      <label
        className={SubframeUtils.twClassNames(
          "group/be48ca43 flex cursor-pointer flex-col items-start gap-2",
          className
        )}
        ref={ref}
        {...otherProps}
      >
        <div
          className={SubframeUtils.twClassNames(
            "flex w-full grow shrink-0 basis-0 flex-col items-start justify-center gap-4",
            { "gap-1.5": showLabel, "min-w-[192px] flex-none": fillContainer }
          )}
        >
          <div
            className={SubframeUtils.twClassNames(
              "hidden flex-col items-start gap-2",
              { 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 w-full min-w-[192px] max-w-[320px] flex-col items-start justify-center gap-4",
              {
                "gap-1": showLabel,
                "min-w-0 max-w-none flex-none": fillContainer,
              }
            )}
          >
            <div
              className={SubframeUtils.twClassNames(
                "flex h-9 w-full min-w-[112px] 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 min-w-[80px] 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 min-w-[80px]": 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:
                        showIconLeft ||
                        type === "search" ||
                        type === "password",
                    }
                  )}
                >
                  {type === "search" ? (
                    <FeatherSearch
                      className={SubframeUtils.twClassNames(
                        "text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary",
                        { hidden: showIconLeft }
                      )}
                    />
                  ) : type === "password" ? (
                    <FeatherLock
                      className={SubframeUtils.twClassNames(
                        "text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary",
                        { hidden: showIconLeft }
                      )}
                    />
                  ) : (
                    <FeatherPlus
                      className={SubframeUtils.twClassNames(
                        "text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary",
                        { hidden: showIconLeft }
                      )}
                    />
                  )}
                  {icon ? (
                    <SubframeCore.IconWrapper
                      className={SubframeUtils.twClassNames(
                        "text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary",
                        {
                          hidden: type === "search" || type === "password",
                          "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",
                    {
                      flex: showIconRight,
                      "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
                className={SubframeUtils.twClassNames("hidden", {
                  flex: type === "password",
                })}
              />
            </div>
            {message ? (
              <span
                className={SubframeUtils.twClassNames(
                  "hidden text-body-extra-small-medium-0 font-body-extra-small-medium-0 text-text-neutral-secondary",
                  { inline: showLabel, "text-text-feedback-negative": error }
                )}
              >
                {message}
              </span>
            ) : null}
          </div>
        </div>
      </label>
    );
  }
);

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