import React, { useState, useEffect } from "react";
import axios from "axios";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import { isAutheticated } from "src/auth";

const ViewPatient = () => {
    // const id = useParams()?.id;

    const location = useLocation();
    const { currencyDetails } = location.state || {};

    const { id } = useParams();
    const token = isAutheticated();

    const [patientData, setPatientData] = useState({});
    const [SAW, setSAW] = useState([
        { volume: "", weight: "" },
        { volume: "", weight: "" },
        { volume: "", weight: "" },
        { volume: "", weight: "" },
        { volume: "", weight: "" },
    ]);
    const navigate = useNavigate();

    const getPatientData = async () => {
        axios
            .get(`/api/patient/getOne/${id}`, {
                headers: {
                    Authorization: `Bearer ${token}`,
                },
            })
            .then((res) => {
                console.log(res.data.data);
                setPatientData(res.data.data);
                if (res.data.data?.variants) {
                    setSAW((prev) => [...res.data.data?.variants]);
                }
            })
            .catch((err) => { });
    };
    useEffect(() => {
        getPatientData();
    }, []);

    const onCancel = () => {
        navigate("//patients");
    };
    let count = 1;
    return (
        <div className=" main-content">
            <div className="  my-3 page-content">
                <div className="container-fluid">
                    {/* <!-- start page title --> */}
                    <div className="row">
                        <div className="col-12">
                            <div className="page-title-box d-flex align-items-center justify-content-between">
                                <h4 className="mb-3">Patient Details</h4>

                                <button
                                    onClick={onCancel}
                                    type="button"
                                    className="mb-2 ml-2 btn btn-warning btn-cancel waves-effect waves-light mr-3"
                                >
                                    Back
                                </button>
                            </div>
                        </div>
                    </div>
                    {/* <!-- end page title --> */}

                    <div className="row">
                        <div className="col-lg-12">
                            <div className="card">
                                <div className="card-body">
                                    <div className="row ml-0 mr-0  mb-10"></div>
                                    <div className="table-responsive table-shoot">
                                        <table className="table table-centered table-nowrap mb-0">
                                            <thead className="thead-light">
                                                <tr>
                                                    <th>Name</th>
                                                    <td>{patientData?.name}</td>
                                                </tr>
                                                <tr>
                                                    <th>Patient Group</th>
                                                    <td>{patientData?.category?.categoryName}</td>
                                                </tr>
                                                <tr>
                                                    <th>Images</th>
                                                    <td>
                                                        {patientData?.image &&
                                                            patientData?.image?.length !== 0
                                                            ? patientData?.image.map((e, i) => (
                                                                <img
                                                                    className="p-1"
                                                                    src={e.url}
                                                                    width="100"
                                                                    alt="preview"
                                                                    key={i}
                                                                />
                                                            ))
                                                            : "No Images Uploaded!"}
                                                    </td>
                                                </tr>


                                                <tr>
                                                    <th>Description</th>
                                                    <td>{patientData?.description}</td>
                                                </tr>
                                                <tr>
                                                    <th>Patient Status</th>
                                                    <td
                                                        className={`badge m-1  ${patientData?.patient_Status === "Active"
                                                            ? "text-bg-success"
                                                            : "text-bg-danger"
                                                            }`}
                                                    >
                                                        {patientData?.patient_Status}
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th>Special Instructions</th>
                                                    <td>
                                                        <p
                                                            style={{ whiteSpace: "pre-line" }}
                                                            className="m-0 p-0"
                                                        >
                                                            {patientData?.special_instructions
                                                                ? patientData?.special_instructions
                                                                : "---"}
                                                        </p>
                                                    </td>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                        <table className="table table-primary mt-3">
                                            <caption
                                                style={{ captionSide: "top" }}
                                                className="text-dark fw-bold"
                                            >
                                                Varients:
                                            </caption>
                                            <thead>
                                                <tr>
                                                    <th className="text-center">Variant Name</th>
                                                    <th className="text-center">Price</th>

                                                    <th className="text-center">VAT</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {SAW.map(
                                                    (r, i) =>
                                                        r.variant_Name !== "" && (
                                                            <tr key={i}>
                                                                <td className="text-center">
                                                                    {r?.variant_Name}
                                                                </td>
                                                                <td className="text-center">
                                                                    {currencyDetails?.CurrencySymbol}
                                                                    {r?.price}
                                                                </td>

                                                                <td className="text-center">
                                                                    {r?.gst_Id?.name + " " + r?.gst_Id?.tax + "%"}
                                                                </td>
                                                            </tr>
                                                        )
                                                )}
                                                {SAW.filter((e) => e.variant_Name !== "").length ===
                                                    0 && (
                                                        <tr>
                                                            <td colSpan={"6"} className="text-center">
                                                                No data available
                                                            </td>
                                                        </tr>
                                                    )}
                                            </tbody>
                                        </table>
                                        {/* <div className="mb-2">
                      <table className="table table-secondary mt-3">
                        <caption
                          style={{ captionSide: "top" }}
                          className="text-dark fw-bold"
                        >
                          Patient Fabric:
                        </caption>
                        {patientData?.patient_Fabric?.length > 0 ? (
                          <>
                            <thead>
                              <tr>
                                <th className="text-center">S. No.</th>
                                <th className="text-center"> Name</th>
                                <th className="text-center"> Use For Part</th>
                              </tr>
                            </thead>
                            <tbody>
                              {patientData?.patient_Fabric?.map((r, i) => (
                                <tr key={i}>
                                  <td className="text-center">{++i}</td>
                                  <td className="text-center">
                                    {r?.fabric_Name}
                                  </td>
                                  <td className="text-center">{r?.for_Part}</td>
                                </tr>
                              ))}
                            </tbody>
                          </>
                        ) : (
                          <>
                            <h5>No Fabric Allotted for this patient!</h5>
                          </>
                        )}
                      </table>
                    </div> */}
                                        {/* <div className="mb-2">
                      <table className="table table-info mt-3">
                        <caption
                          style={{ captionSide: "top" }}
                          className="text-dark fw-bold"
                        >
                          Relevent Patient:
                        </caption>
                        {patientData?.relevent_patient?.length > 0 ? (
                          <>
                            <thead>
                              <tr>
                                <th className="text-center">S. No.</th>
                                <th className="text-center">Patient Name</th>
                              </tr>
                            </thead>
                            <tbody>
                              {patientData?.relevent_patient?.map((r, i) => (
                                <tr key={i}>
                                  <td className="text-center">{count++}</td>
                                  <td className="text-center">{r?.name}</td>
                                </tr>
                              ))}
                            </tbody>
                          </>
                        ) : (
                          <>
                            <h5>No relevent item for this patient !</h5>
                          </>
                        )}
                      </table>
                    </div> */}
                                    </div>

                                    {/* <!-- end table-responsive --> */}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {/* <!-- container-fluid --> */}
            </div>
        </div>
    );
};

export default ViewPatient;