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

import { data } from "react-router-dom";

export function Products() {

const [content, setContent] = useState(<ProductList showForm={showForm} />)

function showList() {
setContent(<ProductList showForm={showForm} />)
}

function showForm() {
setContent(<ProductForm showList={showList} />)
}

return (
<div className="container my-5">
{content}
</div>
)
}

function ProductList(props) {
const [products, setProducts] = useState([]);
const [showModal, setShowModal] = useState(false);

function fetchProducts() {
fetch("http://localhost:3004/products")
.then((Response) => {
if (!Response.ok) {
throw new Error("Unexpected Server Response")
}
return Response.json()
})
.then((data) => {
setProducts(data)
})
.catch((error) => console.log("Error: ", error))
}

useEffect(() => fetchProducts(), [])

function handleShowModal() {
setShowModal(true);
}
function handleCloseModal() {
setShowModal(false);
}

return (
<>
<h2 className="text-center mb-3">List of Products</h2>
<div className="w-75 mx-auto">
<button onClick={handleShowModal} type="button" className="btn btn-
primary me-2">Create</button>
<button onClick={() => fetchProducts()} type="button"
className="btn btn-outline-primary me-2">Refresh</button>
<table className="table table-sm">
<thead>
<tr>
 <th>ID</th>
<th>Name</th>
<th>Brand</th>
<th>Category</th>
<th>Price</th>
<th>Create At</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{
products.map((product, index) => {
return (
<tr key={index}>
<td>{product.id}</td>
<td>{product.name}</td>
<td>{product.brand}</td>
<td>{product.category}</td>
<td>{product.price}</td>
<td>{product.createAt}</td>
<td style={{ width: "10px", whiteSpace:
"nowrap" }}>
<button type="button" className="btn
btn-primary btn-sn me-2">Edit</button>
<button type="button" className="btn
btn-primary btn-sn btn-danger">Delete</button>
</td>
</tr>
)
})
}
</tbody>
</table>
</div>

{/* Modal Bootstrap */}

<div className={`modal fade${showModal ? ' show d-block' : ''}`}
tabIndex="-1" style={showModal ? {background: 'rgba(0,0,0,0.5)'} : {}}>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">Create New Product</h5>
<button type="button" className="btn-close"
onClick={handleCloseModal}></button>
</div>
<div className="modal-body">
<ProductForm showList={handleCloseModal} />
</div>
</div>
</div>
</div>
</>
)
}

function ProductForm(props) {
return (
<>
 <h2 className="text-center mb-3">Create New Product</h2>

<div className="row mb-3">

<div className="col=lg-6 mx-auto">

<form>
<div className="row mb-3">
<label className="col-sm-4 col-form-label">Name</label>
<div className="col-sm-8">
<input className="form-control"
name="name"
defaultValue="" />
</div>
</div>

<div className="row mb-3">

<label className="col-sm-4
col-form-label">Brand</label>
<div className="col-sm-8">
<input className="form-control"
name="brand"
defaultValue="" />
</div>
</div>

<div className="row mb-3">

<label className="col-sm-4
col-form-label">Category</label>
<div className="col-sm-8">
<select className="form-select"
name="category"
defaultValue="">

<option value='Other'>Other</option>
<option value='Phones'>Phones</option>
<option value='Computers'>Computers</option>
<option
value='Accessories'>Accessories</option>
<option value='GPS'>GPS</option>
<option value='Cameras'>Cameras</option>
</select>
</div>
</div>

<div className="row mb-3">

<label className="col-sm-4
col-form-label">Price</label>
<div className="col-sm-8">
<input className="form-control"
name="price"
defaultValue="" />
</div>
</div>

<div className="row mb-3">

<label className="col-sm-4 col-form-
label">Description</label>
<div className="col-sm-8">
 <input className="form-control"
name="brand"
defaultValue="" />
</div>
</div>

<div className="row">
<div className="offset-sm-4 col-sm-4 d-grid">
<button type="submit" className="btn btn-primary
btn-sm me-3">Save</button>
</div>
<div className="col-sm-4 d-grid">
<button onClick={() => props.showList()}
type="button" className="btn btn-secondary me-2">Cancel</button>
</div>
</div>
</form>

</div>
</div>
</>
)
}