"use client";

import { cn } from "@/lib/utils"
import CustomDatePicker from "./CustomDatePicker";

type InputProps =
  | (({ as?: "input" } & Omit<React.ComponentProps<'input'>, 'type'> & {
    type?: React.ComponentProps<'input'>['type'] | 'textarea'
  }) & { icon?: React.ReactNode })
  | (({ as: "select" } & React.ComponentProps<"select">) & { icon?: React.ReactNode })

const Input = (props: InputProps) =>{

  if ("as" in props && props.as === "select") {
    const { className, as: _as, children, ...rest } = props
    return (
      <div className="relative w-full">
        <select
          data-slot="input"
          className={cn(
            "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pl-8 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
            "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
            "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
            "appearance-none",
            "invalid:text-[#90A1B9]",
            className
          )}
          {...(rest as React.ComponentProps<"select">)}
        >
          {children}
        </select>
        <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 inline-flex items-center justify-center">
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4.5 6.75L9 11.25L13.5 6.75" stroke="#90A1B9" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </span>
      </div>
    )
  }

  const { className, type, ...rest } = props as React.ComponentProps<"input"> & {
    as?: "input"
  }
  return (
    type === 'date' ? (
      <CustomDatePicker />
    ) : type === 'textarea' ? (
      <textarea
        data-slot="input"
        className={cn(
          "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input w-full min-w-0 rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm h-24",
          "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
          "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
          "resize-none",
          className
        )}
        {...(rest as Omit<React.ComponentProps<'textarea'>, 'type'>)}
      />
    ) : (
      <>
        <input
          type={type}
          data-slot="input"
          className={cn(
            "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
            "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
            "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
            className
          )}
          {...rest}
        />
        <div className="bg-white absolute top-1/2 -translate-y-1/2 left-3">
          {props.icon}
        </div>
      </>
    )
  )
}

export { Input }