import React, { useState } from 'react'
// import LDFas from './LDFas';
import LDFasH from '../assets/ldfas_h.png';
import { IoArrowForward } from 'react-icons/io5';

const LoginScreen = ({ setPermisos }) => {

	const [username, setUsername] = useState('');
	const [password, setPassword] = useState('');

	const handleSubmit = (e) => {
		e.preventDefault();

		if (username === 'cliente') {
			const _num = Number(password.replace('pass', ''));
			let permisibles = [];

			if (!isNaN(_num) && (_num > 0 && _num < 10)) {
				for (let i = 0; i < _num; i++) {
					permisibles.push(true);
				}
			}
			for (let i = 0; i < (9 - _num); i++) {
				permisibles.push(false);
			}
			setPermisos(permisibles.sort(() => .5 - Math.random()));
		}
	};

	return <div className='login-screen'>
		<div className='container'>
			<div className='row'>
				<div className='col-sm-2 offset-sm-5 my-2'>
					<img src={LDFasH} alt='LDFAS' className='img-fluid' />
				</div>
			</div>
			<div className='row'>
				<form className='col-sm-4 offset-sm-4 text-center' onSubmit={(e) => handleSubmit(e)}>
					<p>Inicio de sesión</p>
					<input className='form-control my-2' type='text' placeholder='Usuario' value={username} onChange={(e) => setUsername(e.target.value)} />
					<input className='form-control my-2' type='password' placeholder='Contraseña' value={password} onChange={(e) => setPassword(e.target.value)} />
					<button className='btn btn-light my-2' type='submit'>Iniciar Sesión <IoArrowForward className='ms-4' /></button>
					{/* <hr /> */}
				</form>
				{/* <button className='btn btn-link text-white'>Olvidé mi contraseña</button> */}
			</div>
		</div>
	</div>
}

export default LoginScreen