import React, {
  forwardRef,
  InputHTMLAttributes,
  ReactNode,
  useEffect,
  useRef,
  useState,
} from "react"
import { SearchIcon, XIcon } from "lucide-react"

import { cn } from "../../design-lib/utils"
import KBD from "./keyboard"
import { Note, NoteMessage } from "./note"

interface InputProps
  extends Omit<InputHTMLAttributes<HTMLInputElement>, "prefix" | "suffix"> {
  type?: "text" | "password" | "email" | "number" | "search" | "tel" | "url"
  prefix?: ReactNode
  suffix?: ReactNode
  disablePrefixStyling?: boolean
  disableSuffixStyling?: boolean
  errored?: boolean
  errorWithMessage?: string
  info?: string
}

interface SearchInputProps extends InputHTMLAttributes<HTMLInputElement> {
  clearButton?: boolean
  removeStyling?: boolean
  keyboard?: string | "alt" | "ctrl" | "shift" | "command"
}

const Input = forwardRef<HTMLInputElement, InputProps>(
  (
    {
      className,
      type = "text",
      prefix,
      suffix,
      disablePrefixStyling = false,
      disableSuffixStyling = false,
      errored,
      errorWithMessage,
      info,
      ...props
    },
    ref
  ) => {
    const prefixRef = useRef<HTMLDivElement>(null)
    const [prefixWidth, setPrefixWidth] = useState<number | null>(null)

    useEffect(() => {
      if (prefixRef.current) {
        const { width } = prefixRef.current.getBoundingClientRect()
        setPrefixWidth(!disablePrefixStyling ? width + 18 : width)
      }
    }, [prefix, disablePrefixStyling])

    const inputStyle = {
      paddingLeft: prefix ? `${prefixWidth}px` : "20px",
    }

    return (
      <div className="relative">
        <div className="relative flex w-full items-center">
          {prefix && (
            <div
              ref={prefixRef}
              className={cn(
                "absolute left-px flex h-[95%] items-center justify-center rounded-l-lg px-4 text-sm font-medium text-muted-foreground [&>svg]:h-3.5 [&>svg]:w-3.5",
                { " border-r bg-accent": !disablePrefixStyling }
              )}
            >
              {prefix}
            </div>
          )}
          <input
            type={type}
            ref={ref}
            className={cn(
              "flex h-12 w-full rounded-lg border border-input bg-background py-1 text-sm text-foreground shadow-small transition-[border-color,box-shadow,background-color] duration-300 placeholder:text-muted-foreground focus:border-black/40 focus:outline-none focus:ring-[3px] focus:ring-gray-7  dark:focus:border-white/70",
              {
                "border-error ring-4 ring-error-light":
                  errored || errorWithMessage,
              },
              className
            )}
            style={inputStyle}
            {...props}
          />
          {suffix && (
            <div
              className={cn(
                "absolute right-px flex h-[95%] items-center justify-center rounded-r-lg bg-background px-4 text-sm font-medium text-muted-foreground [&>svg]:h-3.5 [&>svg]:w-3.5",
                { "border-l bg-accent": !disableSuffixStyling }
              )}
            >
              {suffix}
            </div>
          )}
        </div>
        {errorWithMessage && (
          <Note variant="error" className="mt-1" unStyled>
            <NoteMessage>{errorWithMessage}</NoteMessage>
          </Note>
        )}

        {info && (
          <Note variant="info" className="mt-1" unStyled>
            <NoteMessage>{info}</NoteMessage>
          </Note>
        )}
      </div>
    )
  }
)

Input.displayName = "Input"

const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
  (
    {
      className,
      clearButton = false,
      removeStyling = false,
      keyboard,
      ...props
    },
    ref
  ) => {
    const [value, setValue] = useState("")
    const inputRef = useRef<HTMLInputElement>(null)

    const handleClear = () => {
      setValue("")
      if (inputRef.current) {
        inputRef.current.focus()
      }
    }

    useEffect(() => {
      if (ref && "current" in ref) {
        ref.current = inputRef.current
      }
    }, [ref])

    return (
      <div className="relative w-full">
        <div
          className={cn(
            "absolute left-px flex h-[95%] items-center justify-center rounded-l-lg px-4 text-sm font-medium text-gray-11 "
          )}
        >
          <SearchIcon className="z-50 h-3.5 w-3.5" />
        </div>
        {keyboard && (
          <div
            className={cn(
              "absolute -right-1 flex h-[95%] items-center justify-center rounded-l-lg px-4 text-sm font-medium text-muted-foreground"
            )}
          >
            <KBD
              command={keyboard === "command"}
              shift={keyboard === "shift"}
              alt={keyboard === "alt"}
              ctrl={keyboard === "ctrl"}
              small
              className="z-50 text-foreground"
            >
              {keyboard !== "command" &&
              keyboard !== "shift" &&
              keyboard !== "alt" &&
              keyboard !== "ctrl"
                ? keyboard
                : ""}
            </KBD>
          </div>
        )}

        <input
          type={"text"}
          ref={inputRef}
          className={cn(
            "flex h-12 w-full rounded-lg border border-input bg-background py-1 pl-10 text-sm text-foreground ",
            !removeStyling &&
              "flex h-12 w-full rounded-lg border border-input bg-background py-1 text-sm text-foreground shadow-small transition-[border-color,box-shadow,background-color] duration-300 placeholder:text-muted-foreground focus:border-black/40 focus:outline-none focus:ring-[3px] focus:ring-gray-7  dark:focus:border-white/70",
            className
          )}
          value={value}
          onChange={(e) => setValue(e.target.value)}
          {...props}
        />
        {clearButton && value && (
          <button
            className={cn(
              "absolute right-px flex h-[95%] items-center justify-center rounded-r-lg bg-background px-4 text-sm font-medium text-muted-foreground"
            )}
            onClick={handleClear}
          >
            <XIcon className="h-4 w-4" />
          </button>
        )}
      </div>
    )
  }
)

SearchInput.displayName = "SearchInput"

export { Input, SearchInput }