import React from "react";

import styles from "./Input.css";
import animations from "styles/animations.css";

function InputField({className, type, id, value, onChange, inputType}) {
    // idk how to do this less uglily
    switch (inputType) {
        case "textarea":
            return <textarea className={className} type={type} id={id} value={value} onChange={onChange} />;
        default:
            break;
    }
    return <input className={className} type={type} id={id} value={value} onChange={onChange} />;
}

export default function Input({className, type, field, title, setField, validateField, inputType}) {
    return (
        <div className={styles.container + (className ? " " + className : "")}>
            <div className={styles.row}>
                <label htmlFor={title} className={styles.label}>{title}</label>
                <h3 className={(field?.animating ? animations.shake : "")}
                    onAnimationEnd={() => {setField({...field, animating: false});}}>
                    {field?.erroring ? validateField(field) : null}
                </h3>
            </div>
            <InputField className={styles.input}
                inputType={inputType}
                type={type} 
                id={title}
                value={field?.target?.value ?? ""}
                onChange={(event) => {setField({...field, 
                                                erroring: true,
                                                target: event.target});}}
                field={field} />
        </div>
    );
}