/* eslint-disable jsx-a11y/img-redundant-alt */
import React, { useState, useEffect } from "react";
import { useRecoilState, useRecoilValue } from "recoil";
import { userAtom, tokenAtom } from "../../global/globalState";
import Axios from "axios";

const Appointment = () => {
	const [doctor, setDoctor] = useState(null);
	const [symptoms, setSymptoms] = useState(null);
	const [department, setDepartment] = useState(null);
	const [appointmentDate, setAppointmentDate] = useState(new Date());

	const [user, setUser] = useRecoilState(userAtom);
	const token = useRecoilValue(tokenAtom);

	const [docs, setDocs] = useState([
		{
			_id: "5435",
			name: "None",
		},
	]);

	useEffect(() => {
		Axios.get(`${process.env.REACT_APP_API_URL}/doctor`)
			.then((res) => {
				setDocs(res.data);
			})
			.catch((err) => {
				console.error(err);
			});
	},[]);

	const handleAppointment = () => {
		Axios.post(
			`${process.env.REACT_APP_API_URL}/appointment/book`,
			{
				symptoms,
				appointmentDate,
				department,
				doctor,
			},
			{
				headers: {
					Authorization: "Bearer " + token,
				},
			}
		)
			.then((res) => {
				console.log(res.data);
				setUser(res.data);
				localStorage.setItem("user", JSON.stringify(res.data));
			})
			.catch((err) => {
				console.error(err);
			});
	};

	useEffect(() => {
		Axios.get(`${process.env.REACT_APP_API_URL}/prescription/get`, {
			headers: {
				Authorization: "Bearer " + token,
			},
		})
			.then((res) => {
				console.log(res.data);
				setUser(res.data);
				localStorage.setItem("user", JSON.stringify(res.data));
			})
			.catch((err) => {
				console.error(err);
			});
	}, []);

	return (
		<div className="Appointment">
			<div className="container">
				<div>
					<h1>Book Appointment</h1>
					<p className="content">
						Patients can book online appointments with a specific
						doctor and can get prescription afterwards.
					</p>
				</div>
				<div className="main">
					{/* FORM  */}
					<div className="appointment-submit">
						<h3>Submit your info</h3>
						<div className="appointment-form">
							<label htmlFor="symptoms">Symptoms</label>
							<input
								type="text"
								id="symptoms"
								value={symptoms}
								onChange={(e) => setSymptoms(e.target.value)}
							/>

							<label htmlFor="doctor">Doctor Name</label>
							<select
								name="blood_grp"
								value={doctor}
								onChange={(e) => setDoctor(e.target.value)}>
								{docs &&
									docs.map((doc) => (
										<option key={doc._id} value={doc.name}>
											{doc.name}
										</option>
									))}
							</select>

							<label htmlFor="department">Department</label>
							<input
								type="text"
								id="dept"
								value={department}
								onChange={(e) => setDepartment(e.target.value)}
							/>
							<label htmlFor="date">Appointment Date</label>
							<div className="date-pick">
								<input
									type="date"
									value={
										appointmentDate
											.getFullYear()
											.toString() +
										"-" +
										(appointmentDate.getMonth() + 1)
											.toString()
											.padStart(2, 0) +
										"-" +
										appointmentDate
											.getDate()
											.toString()
											.padStart(2, 0)
									}
									onChange={(e) =>
										setAppointmentDate(e.target.valueAsDate)
									}
								/>
							</div>
							<button
								className="primary"
								onClick={() => handleAppointment()}>
								Book
							</button>
						</div>
					</div>

					{/*  APPOINTMENT  */}
					{user.appointment && (
						<div className="appointment-info">
							<h3>Your Appointment</h3>
							<div className="cards">
								{user.appointment && (
									<div className="card">
										<div className="image">
											<img
												src={require("../../assets/icons/medicine.png")}
												alt="Image"
											/>
										</div>

										<div className="content">
											<h4>
												Doctor :{" "}
												{user.appointment &&
													user.appointment.doctor}
											</h4>
											<p>
												Symptoms :{" "}
												{user.appointment &&
													user.appointment.symptoms}
											</p>
											<p>
												Date :{" "}
												{user.appointment &&
													user.appointment
														.appointmentDate &&
													user.appointment.appointmentDate.substring(
														0,
														10
													)}
											</p>
											<div className="prescription">
												<div className="pres">
													Prescription From Doctor
												</div>
												<p>
													{user.appointment &&
													user.appointment
														.prescription ? (
														<div className="pres-cont">
															<div>
																<strong>
																	Real
																	Symptoms
																</strong>{" "}
																:{" "}
																{
																	user
																		.appointment
																		.prescription
																		.symptoms
																}{" "}
															</div>
															<div>
																<strong>
																	Medicine
																</strong>{" "}
																:{" "}
																{
																	user
																		.appointment
																		.prescription
																		.medicine
																}{" "}
															</div>
															<div>
																<strong>
																	Comments
																</strong>{" "}
																:{" "}
																{
																	user
																		.appointment
																		.prescription
																		.comments
																}{" "}
															</div>
														</div>
													) : (
														<div>
															<p>
																<strong>
																	Yet To
																	Presctibe
																</strong>
															</p>
														</div>
													)}
												</p>
											</div>
										</div>
									</div>
								)}
							</div>
						</div>
					)}
				</div>
			</div>
		</div>
	);
};

export default Appointment;