Untitled

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import CircularProgress from "@material-ui/core/CircularProgress";
import { useSelector } from "react-redux";
import { ReactComponent as Pencil } from "../../assets/icons/pencil.svg";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import { useTranslation } from "react-i18next";
import moment from "moment";
import GetUserToken from "../../utils/GetUserToken";
import Modal from "react-bootstrap/Modal";
import Recommendation from "./HomeRecommendationsPatients";
import { TrackableLink } from "../../utils/helper";

const HomeTablePatient = ({ userId, dateState }) => {
  const userToken = GetUserToken();

  const { t } = useTranslation();

  const state = useSelector((state) => state.user);
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState([]);
  const [open, setOpen] = React.useState(false);
  const [currentcitation, setcurrentcitation] = useState("");
  const [currentDate, setCurrentDate] = useState("");
  const [notime, setNotime] = useState(false);
  const [confirmDelete, setConfirmDelete] = useState(false);
  const [showModal, setShow] = useState(false);
  const [currentRecommendation, setCurrentRecommendation] = useState(null);
  const [recommendation, setRecommendation] = useState([]);

  let today = new Date();
  let yesterday = new Date();
  let tomorrow = new Date();

  yesterday.setHours(yesterday.getHours() - 24);
  tomorrow.setHours(tomorrow.getHours() + 24);

  const formatDate = (date) => {
    let formattedDate = moment(date).format("YYYY-MM-DDTHH:mm:ss.SSSZZ");
    return formattedDate;
  };

  // console.log(data)
  const fetchData = async () => {
    var requestOptions = {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        "api-key": process.env.REACT_APP_API_KEY,
        Authorization: userToken,
      },
      redirect: "follow",
    };
    const res = await fetch(
      process.env.REACT_APP_API_URL +
        "/patients/getPatientCitationsById?user_id=" +
        userId,
      requestOptions
    );
    const json = await res.json();
    console.log(json);
    setData(json.citations);
    setLoading(false);
  };

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

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const handlenotimeClose = () => {
    setNotime(false);
  };

  const sendemail = (id, time) => {
    setcurrentcitation(id);
    setCurrentDate(time);
    setNotime(true);
  };

  const editReminder = (id, time) => {
    setcurrentcitation(id);
    setCurrentDate(time);
    handleClickOpen();
  };

  const deleteCitation = () => {
    setConfirmDelete(false);
    setLoading(true);

    fetch(
      process.env.REACT_APP_API_URL +
        "/citations/archive/" +
        currentcitation +
        "?archived=" +
        currentcitation,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "api-key": process.env.REACT_APP_API_KEY,
          Authorization: userToken,
        },
      }
    ).then(
      () => fetchData(),
      () => setLoading(false)
    );
  };

  const handleCloseModal = () => {
    setShow(false);
  };

  const showRecommendations = (event, item) => {
    // console.log(item);
    event.preventDefault();
    const arrayRecommendations = JSON.parse(item.recommendation);
    setRecommendation(arrayRecommendations);
    setCurrentRecommendation(item);
    setShow(true);
  };

  const deleteAndCreateNewCitation = () => {
    setConfirmDelete(false);
    setLoading(true);
    fetch(
      process.env.REACT_APP_API_URL +
        "/citations/archive/" +
        currentcitation +
        "?archived=" +
        currentcitation,
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "api-key": process.env.REACT_APP_API_KEY,
          Authorization: userToken,
        },
      }
    )
      .then(() => fetchData())
      .then(() => setLoading(false))
      .then(
        () =>
          (window.location.href = `/existingpatientcitation/${btoa(
            state.auth["user_id"]
          )}`)
      );
  };

  const patientTable = (
    <>
      <div
        style={{
          paddingTop: "15px",
          paddingBottom: "25px",
          alignItems: "center",
        }}
      >
        <span className="home-reminders-title">
          {t("HomeTablePatient.0")}&nbsp;&gt;&nbsp;
        </span>
        <Link
          to={`/existingpatientcitation/${btoa(state.auth["user_id"])}`}
          className="blue-anchors"
          id="patient_newAppointment"
          onClick={() => TrackableLink("patient_newAppointment")}
        >
          {t("HomeTablePatient.1")}
        </Link>
      </div>

      <table
        className="table table-striped tables responsive"
        style={{ backgroundColor: "#FFFFFF" }}
      >
        <thead>
          <tr>
            <th>{t("HomeTablePatient.17")}</th>
            <th>{t("HomeTablePatient.2")}</th>
            <th>{t("HomeTablePatient.3")}</th>
            <th>{t("HomeTablePatient.4")}</th>
            <th>{t("HomeTablePatient.18")}</th>
            <th>{t("Titles.Recommendations")}</th>
            <th style={{ width: "7%" }}></th>
          </tr>
        </thead>
        <tbody>
          {data.map((item, i) => (
            <tr key={i}>
              <td>
                {item.archived ? (
                  <span style={{ color: "#857c8e", fontStyle: "italic" }}>
                    {t("HomeTablePatient.5")}
                  </span>
                ) : formatDate(today) > item.time ? (
                  <>{t("HomeTablePatient.6")}</>
                ) : (
                  <>{t("HomeTablePatient.7")}</>
                )}
              </td>
              <td>
                {item.archived ? (
                  <span
                    style={{
                      color: "#857c8e",
                      textDecoration: "line-through",
                      fontStyle: "italic",
                    }}
                  >
                    {new Date(item.time).toLocaleDateString([], {
                      year: "numeric",
                      month: "numeric",
                      day: "numeric",
                      hour: "2-digit",
                      minute: "2-digit",
                      timeZone: "UTC",
                    })}
                  </span>
                ) : (
                  <>
                    {new Date(item.time).toLocaleDateString([], {
                      year: "numeric",
                      month: "numeric",
                      day: "numeric",
                      hour: "2-digit",
                      minute: "2-digit",
                      timeZone: "UTC",
                    })}
                  </>
                )}
              </td>
              <td>
                {item.archived ? (
                  <span
                    style={{
                      color: "#857c8e",
                      textDecoration: "line-through",
                      fontStyle: "italic",
                    }}
                  >
                    {item.treatment}
                  </span>
                ) : (
                  <>{item.treatment}</>
                )}
              </td>
              <td>
                {item.archived ? (
                  <span
                    style={{
                      color: "#857c8e",
                      textDecoration: "line-through",
                      fontStyle: "italic",
                    }}
                  >
                    {item.doctor}
                  </span>
                ) : (
                  <>{item.doctor}</>
                )}
              </td>
              <td>
                {item.hasquiz != null && !item.archived ? (
                  <>
                    {item.quiz_completed ? (
                      <>
                        <Link
                          className="blue-anchors"
                          to={{
                            pathname: "/patient-answers/" + `${item.hasquiz}`,
                          }}
                        >
                          &nbsp;{t("HomeTablePatient.8")}
                        </Link>
                      </>
                    ) : (
                      <>
                        <Link
                          className="blue-anchors"
                          target="_blank"
                          to={{ pathname: "/answer-quiz/" + `${item.hasquiz}` }}
                        >
                          &nbsp;{t("HomeTablePatient.9")}
                        </Link>
                      </>
                    )}
                  </>
                ) : (
                  <></>
                )}
              </td>
              <td>
                {item.recommendation != null && !item.archived ? (
                  <>
                    <span
                      className="blue-anchors"
                      onClick={(e) => showRecommendations(e, item)}
                      style={{ cursor: "pointer" }}
                    >
                      {t("Messages.Show recommendations")}
                    </span>
                  </>
                ) : (
                  <></>
                )}
              </td>
              <td style={{ textAlign: "right" }}>
                {item.archived ? (
                  <></>
                ) : (
                  <>
                    {item.time > formatDate(tomorrow) ? (
                      <>
                        <Pencil
                          className="icon"
                          title={"Termin umplanen"}
                          style={{ cursor: "pointer" }}
                          // id={item.id}
                          // name={item.time}
                          onClick={() => editReminder(item.id, item.time)}
                        />
                      </>
                    ) : (
                      <>
                        {item.time > formatDate(today) ? (
                          <>
                            <Pencil
                              className="icon"
                              title={"Termin umplanen"}
                              style={{ cursor: "pointer" }}
                              // id={item.id}
                              // name={item.time}
                              onClick={() => sendemail(item.id, item.time)}
                            />
                          </>
                        ) : (
                          <></>
                        )}
                      </>
                    )}
                  </>
                )}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );

  const load = (
    <>
      <div className="d-flex justify-content-center">
        <CircularProgress color="secondary" />
      </div>
    </>
  );

  return (
    <>
      {loading ? load : patientTable}

      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">
          {t("HomeTablePatient.10")} #{currentcitation} -{" "}
          {new Date(currentDate).toLocaleString([], {
            year: "numeric",
            month: "numeric",
            day: "numeric",
            hour: "2-digit",
            minute: "2-digit",
            timeZone: "UTC",
          })}
        </DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            {t("HomeTablePatient.11")}
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button
            onClick={() => {
              setConfirmDelete(true);
              setOpen(false);
            }}
            color="secondary"
          >
            {t("HomeTablePatient.12")}
          </Button>
          <Button onClick={handleClose} color="primary">
            {t("HomeTablePatient.13")}
          </Button>
        </DialogActions>
      </Dialog>

      <Dialog
        open={notime}
        onClose={() => setNotime(false)}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">
          {t("HomeTablePatient.10")} #{currentcitation} -{" "}
          {new Date(currentDate).toLocaleString([], {
            year: "numeric",
            month: "numeric",
            day: "numeric",
            hour: "2-digit",
            minute: "2-digit",
            timeZone: "UTC",
          })}
        </DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            {t("HomeTablePatient.14")}
            &nbsp;
            <a href="mailto:assistenz@qi-point.de">assistenz@qi-point.de</a>
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setNotime(false)} color="primary">
            {t("HomeTablePatient.13")}
          </Button>
        </DialogActions>
      </Dialog>

      <Dialog
        open={confirmDelete}
        onClose={() => setConfirmDelete(false)}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">
          {t("HomeTablePatient.10")} #{currentcitation} -{" "}
          {new Date(currentDate).toLocaleString([], {
            year: "numeric",
            month: "numeric",
            day: "numeric",
            hour: "2-digit",
            minute: "2-digit",
            timeZone: "UTC",
          })}
        </DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            {t("HomeTablePatient.15")}
            &nbsp;
            <a href="mailto:assistenz@qi-point.de">assistenz@qi-point.de</a>
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={deleteAndCreateNewCitation} color="secondary">
            {t("HomeTablePatient.16")}
          </Button>
          <Button onClick={deleteCitation} color="secondary">
            {t("HomeTablePatient.12")}
          </Button>
          <Button onClick={() => setConfirmDelete(false)} color="primary">
            {t("HomeTablePatient.13")}
          </Button>
        </DialogActions>
      </Dialog>

      <Modal
        show={showModal}
        onHide={handleCloseModal}
        aria-labelledby="contained-modal-title-vcenter"
        centered
        size="lg"
      >
        <Modal.Header style={{ background: "#F4F5FA" }}>
          <Modal.Title>
            {currentRecommendation != null ? (
              <>
                {" "}
                {new Date(currentRecommendation.time).toLocaleDateString([], {
                  year: "numeric",
                  month: "numeric",
                  day: "numeric",
                  hour: "2-digit",
                  minute: "2-digit",
                  timeZone: "UTC",
                })}{" "}
                - {currentRecommendation.treatment}
              </>
            ) : (
              <></>
            )}
          </Modal.Title>
        </Modal.Header>
        <Modal.Body style={{ background: "#F4F5FA" }}>
          <Recommendation recommendation={recommendation} />
        </Modal.Body>
      </Modal>
    </>
  );
};

export default HomeTablePatient;