import { useQuery } from "@tanstack/react-query";
import { TransactionsByTeacherAPI } from "../../API/API";
import styles from "../../../styles";
import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
import React, { useState } from "react";
import TransactionEntry from "../../TransactionEntry/TransactionEntry";
import TransactionFilterMenu from "../../TransactionFilterMenu/TransactionFilterMenu";
import Popup from "reactjs-popup";
import EditTransactionModal from "../../EditTransactionModal/EditTransactionModal";

export default function TeacherTransactionListView() {
  const [EditTransactionOpen, SetEditTransactionOpen] = useState(false);
  const [SelectedTransaction, SetSelectedTransaction] = useState(0);
  const transactions = useQuery({
    queryKey: ["transactions_teacher"],
    queryFn: TransactionsByTeacherAPI,
  });
  const [filter, setFilter] = useState("");
  if (transactions.isLoading) {
    return (
      <div
        style={{
          ...styles.flex_column,
          ...{
            alignItems: "center",
            justifyContent: "center",
            paddingTop: "64px",
          },
        }}
      >
        <CircularProgress style={{ height: "128px", width: "128px" }} />
        <p
          style={{
            ...styles.text_dark,
            ...styles.text_L,
          }}
        >
          Loading
        </p>
      </div>
    );
  }
  return (
    <div>
      <div style={styles.flex_column}>
        <TransactionFilterMenu filter={filter} setFilter={setFilter} />
        <div style={{ marginTop: "16px" }} />
        <div
          style={{
            ...styles.flex_column,
            ...{ height: "50vh", overflowY: "scroll", width: "85%", marginInline: "6.5%" },
          }}
        >
          {transactions.data ? (
            transactions.data
              .filter((transaction) =>
                filter !== "" ? transaction.transaction_status == filter : true
              )
              .map((transaction) => (
                <React.Fragment key={transaction.id}>
                  <TransactionEntry
                    onClick={() => {
                      if (
                        transaction.transaction_status == "Pending Approval"
                      ) {
                        SetSelectedTransaction(transaction.id);
                        SetEditTransactionOpen(true);
                      }
                    }}
                    transaction={transaction}
                  />
                </React.Fragment>
              ))
          ) : (
            <></>
          )}
        </div>
      </div>
      <Popup
        open={EditTransactionOpen}
        onClose={() => SetEditTransactionOpen(false)}
        modal
        position={"top center"}
        contentStyle={styles.popup_center}
      >
        <EditTransactionModal
          id={SelectedTransaction}
          setOpen={SetEditTransactionOpen}
        />
      </Popup>
    </div>
  );
}