import React, { Component } from 'react';

class AssetRequest extends Component {

constructor(props) {
super(props);
this.state = {
requestRequesterName: '',
requestAssetName: '',
requestQuantity: '',
requestReason: '',
requestUrgency: '',
error: null,
requests: [], // To store user's requests
};
}

handleInputChange = (e) => {

this.setState({ [e.target.name]: e.target.value });
};

handleSubmit = (e) => {

e.preventDefault();

const token =
'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJmcmVzaCI6ZmFsc2UsImlhdCI6MTY5OTg3NTE2NywianRpIjoiZ
DBhNWVlNGEtMWIzYy00MzA2LWEwODAtNjcyMzc5NWM5YWY4IiwidHlwZSI6ImFjY2VzcyIsInN1YiI6eyJ1
c2VyX2lkIjoxMSwicm9sZSI6Ik5vcm1hbCBFbXBsb3llZSJ9LCJuYmYiOjE2OTk4NzUxNjcsImV4cCI6MTY5OTk2
MTU2N30.H8KZjLPYwBsabCnBm4y15ecUwTddXdyqhLO6lqdnGqA'; // Replace with your token

if (!token) {
this.setState({ error: 'No token found. Please log in first.' });
return;
}

const requestData = {
requester_name: this.state.requestRequesterName,
asset_name: this.state.requestAssetName,
reason: this.state.requestReason,
quantity: this.state.requestQuantity,
urgency: this.state.requestUrgency,
};

const headers = {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`,
};
const apiEndpoint = 'http://localhost:5000/request_asset'; // Replace with your API endpoint

fetch(apiEndpoint, {
method: 'POST',
headers: headers,
body: JSON.stringify(requestData),
})
.then(response => {
if (!response.ok) {
throw new Error('Failed to submit request. Please check the data and try again.');
}
return response.json();
})
.then(data => {
console.log('Request successful:', data);
this.setState({ error: null });

// Show an alert for a successful request

window.alert('Request sent successfully!');

// Add the new request to the list

this.setState(prevState => ({
requests: [...prevState.requests, data],
}));
})
.catch(error => {
console.error('Failed to submit request:', error);
this.setState({ error: error.message });
});
};

render() {
const {
requestRequesterName,
requestAssetName,
requestQuantity,
requestReason,
requestUrgency,
error,
requests,
} = this.state;

return (
<div>
<h1>Request Asset</h1>
<form onSubmit={this.handleSubmit}>
<input
type="text"
name="requestRequesterName"
placeholder="Requester Name"
value={requestRequesterName}
onChange={this.handleInputChange}
/>
<input
type="text"
name="requestAssetName"
placeholder="Asset Name"
value={requestAssetName}
onChange={this.handleInputChange}
/>
<input
type="text"
name="requestQuantity"
placeholder="Quantity"
value={requestQuantity}
onChange={this.handleInputChange}
/>
<input
type="text"
name="requestReason"
placeholder="Reason"
value={requestReason}
onChange={this.handleInputChange}
/>
<input
type="text"
name="requestUrgency"
placeholder="Urgency"
value={requestUrgency}
onChange={this.handleInputChange}
/>

<button type="submit">Submit Request</button>

</form>
{error && <p>Error: {error}</p>}

<h2>My Requests</h2>
<ul>
{requests.map((request, index) => (
<li key={index}>
<p>Request ID: {request.id}</p>
<p>Requester Name: {request.requester_name}</p>
<p>Asset Name: {request.asset_name}</p>
<p>Quantity: {request.quantity}</p>
<p>Reason: {request.reason}</p>
<p>Urgency: {request.urgency}</p>
</li>
))}
</ul>
</div>
);
}
}

export default AssetRequest;