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";

export default function TeacherTransactionListView() {
  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" },
          }}
        >
          {transactions.data ? (
            transactions.data
              .filter((transaction) =>
                filter !== "" ? transaction.transaction_status == filter : true
              )
              .map((transaction) => (
                <React.Fragment key={transaction.id}>
                  <TransactionEntry transaction={transaction} />
                </React.Fragment>
              ))
          ) : (
            <></>
          )}
        </div>
      </div>
    </div>
  );
}