import { Eye, EyeSlash } from "iconsax-react"
import React, { FC, useState } from "react"
import { Input as InputComponent } from '@headlessui/react'
import { findBankByPAN } from "../../utility/cart"
import clsx from "clsx"

type Props = {
    type?: React.HTMLInputTypeAttribute,
    placeholder: string,
    icon?: React.ReactNode,
    field?: any,
    ref?: any,
    className?: string
}

export const Input: FC<Props> = ({ placeholder, type = "text", icon, field, ref, className }) => {
    const [hidden, setHidden] = useState<boolean>(false)
    const handleHidden = () => setHidden(prev => !prev)
    return (
        <div className={`relative w-full`}>
            <div className={clsx("absolute top-[18.5px] left-5 grid h-5 w-5 place-items-center text-blue-gray-500", {
                "top-[14.5px] left-7": placeholder === "شماره کارت" && field.value
            })}>
                {type === "password" ?
                    !hidden ? <Eye size="23" color="#777577" onClick={handleHidden} /> : <EyeSlash size="23" color="#777577" onClick={handleHidden} />
                    : icon}
                {placeholder === "شماره کارت" && field.value && findBankByPAN(field.value).icon}
            </div>
            <InputComponent ref={ref} {...field} type={type === "password" && hidden ? "text" : type} placeholder={placeholder} className={`input-style min-w-full ${className}`} />
        </div>
    )
}