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

import axios from "axios";

import "./App.css";

function Home() {
const url = "http://localhost:8001/courses";
const [data, setData] = useState([]);
const [rating, setRating] = useState(1);
const [refresh, setrefresh] = useState(1);

useEffect(() => {
handleGetData();
}, []);

const handleGetData = async () => {

try {
const res = await axios.get(`${url}/get`);
setData(res.data);
} catch (error) {
console.error("Error fetching data:", error);
}
};

const handleApply = async (id) => {

try {
await axios.post(`${url}/enroll/${id}`, {}, {
headers: { "Content-Type": "application/json" },
});
alert("Course applied successfully");
handleGetData();
} catch (error) {
console.error("Enter applying to course:", error);
}
};
const handleRating = (e) => {
setRating(e.target.value);
};
const handleAddRating = async (id) => {
try {
await axios.patch(`${url}/rating/${id}`, { rating :parseInt(rating)}
);
alert("Rating added successfully");
handleGetData();
} catch (error) {
console.error("Error adding rating:", error);
}
};

const handleDrop = async (id) => {

try {
await axios.delete(`${url}/drop/${id}`);
alert("Course dropped successfully");
handleGetData();
} catch (error) {
console.error("Error dropping course:", error);
}
 };

return (
<div className="home">
<header>
<h2>ABC Learning</h2>
</header>
<div className="cardContainer">
{data.map((course) => {
const {
_id,
courseName,
courseDept,
description,
isApplied,
isRated,
duration,
noOfRatings,
rating,
} = course;
return (
<div className="card" key={_id}>
<ul>
<div className="header">
<li data-testid="course-name">{courseName}</li>
<li data-testid="course-dept">{courseDept}</li>
<li data-testid="course-description">{description}</li>
{isApplied ? (
<li>
{!isRated && (
<li>
Rate:
<select
className="rating"
name="rating"
data-testid="select-box"
value={rating}
onChange={handleRating}
>
{[1, 2, 3, 4, 5].map((value) => (
<option key={value} value={value}>{value}</option>
))}
</select>
<button className="rate" data-testid="add-rate"
onClick={() => handleAddRating(_id)}>
Add
</button>
</li>
)}

<button className="drop" data-testid="drop" onClick={() =>

handleDrop(_id)}>
Drop Course
</button>
</li>
) : (
<li>
<button className="btn" data-testid="apply" onClick={() =>
handleApply(_id)}>
 Apply
</button>
</li>
)}
</div>
<div className="footer">
{/* footer contents */}
<li data-testid="footer">{duration} hrs . {noOfRatings}
Ratings . {rating}/5</li>
</div>
</ul>
</div>
);
})};

</div>
</div>
);
}

export default Home;