import React, { useState, useEffect } from 'react';

import './App.css';
import { EmployeeData } from './EmployeeData';

function App() {
const [data, setData] = useState([]);
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [name, setName] = useState('');
const [id, setId] = useState(null); // Track the id of the item being edited

useEffect(() => {
setData(EmployeeData);
}, []);

const handleEdit = (id) => {

const item = data.find(item => item.id === id);
setFirstName(item.firstName);
setLastName(item.lastName);
setName(item.name);
setId(item.id);
};

const handleDelete = (id) => {

if (id > 0) {
if (window.confirm('Are you sure to delete this item?')) {
const updatedData = data.filter(item => item.id !== id);
setData(updatedData);
}
}
};

const handleSave = () => {

if (id === null) {
// Add new item
const newId = data.length ? data[data.length - 1].id + 1 : 1;
const newData = {
id: newId,
firstName: firstName,
lastName: lastName,
name: name
};
setData([...data, newData]);
} else {
// Update existing item
const updatedData = data.map(item =>
item.id === id ? { id, firstName, lastName, name } : item
);
setData(updatedData);
}
handleClear();
};

const handleClear = () => {

setFirstName('');
setLastName('');
setName('');
setId(null); // Clear the id to indicate no item is being edited
};
 return (
<div className="App">
<div style={{ display: 'flex', justifyContent: 'center', flexDirection:
'column', alignItems: 'center' }}>
<div>
<label>
First Name:
<input type="text" placeholder="Enter First name" value={firstName}
onChange={(e) => setFirstName(e.target.value)} />
</label>
</div>
<div>
<label>
Last Name:
<input type="text" placeholder="Enter Last name" value={lastName}
onChange={(e) => setLastName(e.target.value)} />
</label>
</div>
<div>
<label>
Name:
<input type="text" placeholder="Enter name" value={name} onChange={(e)
=> setName(e.target.value)} />
</label>
</div>
<div>
<button className="btn btn-primary"
onClick={handleSave}>Save</button>&nbsp;
<button className="btn btn-danger" onClick={handleClear}>Clear</button>
</div>
</div>

<table className="table table-hover">

<thead>
<tr>
<th>Sr. No</th>
<th>First Name</th>
<th>Last Name</th>
<th>Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{data.map((item, index) => (
<tr key={index}>
<td>{index + 1}</td>
<td>{item.firstName}</td>
<td>{item.lastName}</td>
<td>{item.name}</td>
<td>
<button className="btn btn-primary" onClick={() =>
handleEdit(item.id)}>Edit</button>&nbsp;
<button className="btn btn-danger" onClick={() =>
handleDelete(item.id)}>Delete</button>
</td>
</tr>
))}
</tbody>
 </table>
</div>
);
}

export default App;