import { useState } from "react";

export interface LoginFormValue {
	username: string;
	password: string;
}

interface LoginFormProps {
	onSubmit: (data: LoginFormValue) => void;
	disabled?: boolean;
}

export default function LoginForm(props: LoginFormProps) {
	const [form, setForm] = useState<LoginFormValue>({
		username: "",
		password: "",
	});

	function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
		const target = event.target;
		const name = target.name;
		const value = target.value;

		setForm({
			...form,
			[name]: value,
		});
	}

	function handleBtnClick() {
		props.onSubmit({ ...form });
	}

	return (
		<div className="card">
			<div className="card-body">
				<form>
					<div className="form-floating mb-3">
						<input
							type="text"
							className="form-control"
							id="username"
							name="username"
							value={form.username}
							onChange={handleInputChange}
						/>
						<label className="form-label">Nom d'utilisateur</label>
					</div>
					<div className="form-floating mb-3">
						<input
							type="password"
							className="form-control"
							id="password"
							name="password"
							onChange={handleInputChange}
							value={form.password}
						/>
						<label className="form-label">Mot de passe</label>
					</div>
				</form>
				<div className="d-grid">
					<button
						type="button"
						disabled={props.disabled}
						onClick={handleBtnClick}
						className="btn btn-primary"
					>
						Connexion
					</button>
				</div>
			</div>
		</div>
	);
}