import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import React, {Dispatch, SetStateAction, useState} from "react";

export default function TextInputField(
    {
        label,
        inputValue,
        inputType,
        setInputValue,
        inputId,
        isRequired = false,
        hintMessage,
        isDisabled = false,
        icon
    }:{
        label: string,
        inputValue: string,
        inputType: "text" | "password" | "email" | "url" | "date" | "number",
        setInputValue: Dispatch<SetStateAction<string>>,
        inputId: string,
        isRequired?: boolean,
        hintMessage?: string,
        isDisabled?: boolean,
        icon?: IconDefinition,
    }
){

    const [hintShown, setHintShown] = useState<boolean>(false);

    function showHint(){
        if (hintMessage){
            setHintShown(true);
        }
    }
    function hideHint(){
        if (hintShown){
            setHintShown(false);
        }
    }

    return (
        <div className="w-full">
            <div
                className={'flex justify-start items-center gap-2 px-4 py-2.5 rounded-xl bg-secondary/50 text-text-primary border border-secondary/50 outline-none w-full hover:bg-secondary hover:border-secondary focus-within:border-primary focus-within:ring-4 focus-within:ring-primary/20 focus-within:bg-secondary transition-all duration-200'}>
                {
                    icon && <FontAwesomeIcon icon={icon} className={'text-primary w-4 h-4'}/>
                }
                <input
                    type={inputType}
                    id={inputId}
                    value={inputValue}
                    onChange={(e) => setInputValue(e.target.value)}
                    required={isRequired}
                    placeholder={`${label}${isRequired ? ' *' : ''}`}
                    onFocus={showHint}
                    onBlur={hideHint}
                    className={'w-full bg-transparent text-text-primary border-none outline-none placeholder:text-muted/60 disabled:opacity-50 disabled:cursor-not-allowed'}
                    disabled={isDisabled}
                />
            </div>
            {
                hintShown && hintMessage &&
                <small className="text-muted text-xs mt-1 ml-1 block">{hintMessage}</small>
            }
        </div>
    )
}