import {FunctionalComponent} from "preact";
import {useState} from "preact/hooks";
import cn from "classnames";
import {JSX} from "preact";
// import GenericEventHandler = JSXInternal.GenericEventHandler;
import style from "./style.module.scss";
import {Settings} from "preact-feather";
import {FeatherProps} from "preact-feather/src/types";

interface InputProps<T> {
    type: "text" | "number" | "email" | "password";
    icon: FunctionalComponent<FeatherProps>;
    value: T;
    placeholder?: string;
    onChange: (value: T) => void;
    className?: string;
    disabled?: boolean;
    id?: string;
    name?: string;
}

export const Input: FunctionalComponent<InputProps<string | number>> = ({
                                                                            type,
                                                                            icon,
                                                                            value,
                                                                            placeholder,
                                                                            onChange,
                                                                            className,
                                                                            disabled,
                                                                            id,
                                                                            name,
                                                                        }) => {
    const [focused, setFocused] = useState(false);

    const inputClass = cn(style.input, "generic-input", className, {
        focused,
        disabled,
    });

    const handleInputChange: JSX.GenericEventHandler<HTMLInputElement> = (event) => {
        console.log("handleInputChange")
        const target = event.target as HTMLInputElement;
        onChange(type === "number" ? (parseFloat(target.value) || 0) : target.value);
    };

    const Icon = icon;

    return (
        <div className={style.wrapper}>
            <Icon className={style.icon} size={18}/>
            <input
                // required=""
                // minLength="3"
                // maxLength="15"
                title="Le pseudo doit avoir une longueur comprise entre 3 et 15 caractères."
                // tabIndex="10"
                type={type}
                id={id}
                name={name}
                value={value}
                placeholder={placeholder}
                // onChange={handleInputChange}
                onInput={handleInputChange}
                className={inputClass}
                disabled={disabled}
                onFocus={() => setFocused(true)}
                onBlur={() => setFocused(false)}
            />
        </div>
    )

    return (
        <input
            type={type}
            id={id}
            name={name}
            value={value}
            placeholder={placeholder}
            onChange={handleInputChange}
            className={inputClass}
            disabled={disabled}
            onFocus={() => setFocused(true)}
            onBlur={() => setFocused(false)}
        />
    );
};