import React from "react";
import { useState } from "react";
import { useRecoilValue } from "recoil";
import { tokenAtom } from "../../global/globalState";
import Axios from "axios";

const Medicine = () => {
	const token = useRecoilValue(tokenAtom);
	const [enteredName, setEnteredName] = useState("");
	const [commonNames, setCommonNames] = useState(null);

	const getBrandNames = () => {
		Axios.post(
			`https://eureka-scrapper-radioactive11.herokuapp.com/generic_name`,
			{
				generic_name: enteredName,
			},
			{
				headers: {
					Authorization: "Bearer " + token,
				},
			}
		)
			.then((res) => {
				console.log(res.data);
				setCommonNames(res.data);
			})
			.catch((err) => {
				console.log(err);
			});
	};

	return (
		<div className="Medicine">
			<div className="container">
				<div className="top">
					<h1>Common Medicine Names</h1>
					<p>
						Making brand names of medicines available to the patient
						by providing a generic name of the medicine, which are
						far cheaper and easily available.
					</p>
				</div>

				<div className="main">
					<div className="entered-name">
						<label htmlFor="medicine">Medicine Name</label>
						<input
							type="text"
							value={enteredName}
							onChange={(e) => setEnteredName(e.target.value)}
						/>
					</div>
					<button className="primary" onClick={() => getBrandNames()}>
						Get Results
					</button>
					{commonNames && (
						<div className="commons">
							<label htmlFor="commons">Common Medicines</label>
							<div className="result">
								<table>
									<thead>
										<tr>
											<th>Name</th>
											<th>General Price</th>
											<th>Source</th>
										</tr>
									</thead>
									<tbody>
										{commonNames.map((med) => (
											<tr>
												<td>{med.name}</td>
												<td>{med.price}</td>
												<td>{med.source}</td>
											</tr>
										))}
									</tbody>
								</table>
							</div>
						</div>
					)}
				</div>
			</div>
		</div>
	);
};

export default Medicine;