/* eslint-disable jsx-a11y/label-has-associated-control */

/* eslint-disable prefer-const */
/* eslint-disable no-unused-vars */
import React, { useState, useEffect } from 'react';
import '../../App.css';

const Register = () => {

let local;
let [projects, setProjects] = useState(1);
let [projectsInputs, setProjectsInputs] = useState([]);
let [inputsValue, setInputsValue] = useState([
]);

const addProjectsInput = () => {

let input = (
<div className="">
<h5 className="font-weight-bold" style={{ color: '#00008b' }}>
Experience #
{projects}
</h5>
<label htmlFor="name">Company</label>
<input
type="text"
className="form-control mb-4"
id={projects}
onChange={(e) => {
local = inputsValue.slice();
let id = e.target.attributes.getNamedItem('id').value;
console.log(local);
local[id].company = e.target.value;
setInputsValue((last) => [...local]);
}}
/>

<label htmlFor="name">Position</label>
<input
type="text"
className="form-control mb-4"
/>

<label htmlFor="name">Company Logo Image Url</label>

<input type="text" className="form-control mb-4" />
</div>
);

setProjectsInputs((last) => [...last, input]);

setInputsValue((last) => [...last, {
id: projects,
company: '',
position: '',
imgSrc: '',
}]);
};

return (
<div className="container-fluid p-0" style={{ minHeight: '100vh', background:
'#00008b' }}>
<div className="container bg-white px-4 pt-3 rounded-lg shadow"
style={{ minHeight: '100vh' }}>
 <h2 className="mb-5 font-weight-bold text-center" style={{ color: '#00008b'
}}>Make a new portofolio</h2>
<form action="">
<label htmlFor="name">Full name</label>
<input type="text" id="name" className="form-control mb-4"
placeholder="Full Name" />

<label htmlFor="email">Email</label>
<input type="text" id="email" className="form-control mb-4"
placeholder="Email" />

<label htmlFor="description">Your desciption</label>

<textarea id="description" className="form-control mb-4"
placeholder="Your desciption" />

<label htmlFor="whire">Why recruiters should hire you ?</label>

<textarea id="whire" className="form-control mb-4"
placeholder="Answer" />

{
(projects > 0 ? projectsInputs.map((projectsInput) => projectsInput) :
'')
}

<button
type="button"
className="btn btn-info"
onClick={() => {
setProjects((last) => (last + 1));
addProjectsInput();
}}
>
Add past experience
</button>

<button className="btn my-5 btn-block text-light font-weight-bold"

type="submit" style={{ background: '#00008b' }}>Register</button>
<small>
Or edit your portofolio if you have one
{' '}
<a href="/">here</a>
!
</small>
</form>
</div>
</div>
);
};

export default Register;