import React, { useMemo, useState } from "react";
import TransactionCard from "./TransactionCard/TransactionCard";
import { useGetTransactions } from "../../../../apis/Payment";
import { InputNumber, Select } from "antd";
const companies = [
  {
    label: "All",
    value: "",
  },
  {
    label: "RKD Holdings Limited",
    value: "RKD Holdings Limited",
  },
  {
    label: "Tourism Investement Fund Limited",
    value: "Tourism Investement Fund Limited",
  },
  {
    label: "Bandipur Cable Car & Tourism Limited",
    value: "Bandipur Cable Car & Tourism Limited",
  },
  {
    label: "Panchase Cable Car and Tours Limited",
    value: "Panchase Cable Car and Tours Limited",
  },
  {
    label: "Bizbazar Limited",
    value: "Bizbazar Limited",
  },
];
const payment_type = [
  {
    label: "All",
    value: "",
  },
  {
    label: "Credit",
    value: "CR",
  },
  {
    label: "Debit",
    value: "DR",
  },
];
/**
 * Transaction history component
 * @module Profile/TransactionHistory
 * @return {JSX.Element}
 */
const TransactionHistory = () => {
  /**
   * React state that stores company name
   * @type {string}
   * @name company
   * @default ""
   * @memberof module:Profile/TransactionHistory
   *
   */
  const [company, setCompany] = useState("");
  /**
   * React state that stores transaction type
   * @type {string}
   * @name transactionType
   * @default ""
   * @memberof module:Profile/TransactionHistory
   */
  const [transactionType, setTransactionType] = useState("");
  /**
   * React state that stores amount
   * @type {number}
   * @name amount
   * @default null
   * @memberof module:Profile/TransactionHistory
   */
  const [amount, setAmount] = useState(null);
  /**
   * React query hook that fetches transaction data
   * @type {object}
   * @name transactionData
   * @memberof module:Profile/TransactionHistory
   */
  const { data: transactionData, isLoading } = useGetTransactions();
  /**
   * React memoized state that stores filtered transaction data
   * @type {object}
   * @name transactions
   * @memberof module:Profile/TransactionHistory
   * @type {*|*[]}
   */
  const transactions = useMemo(() => {
    let temp = transactionData?.data?.data?.results || [];
    //handle company select
    if (company) {
      const filteredList = temp.filter((item) => item.company_name === company);
      temp = filteredList;
    }
    // handle payment type
    if (transactionType) {
      const filteredList = temp.filter(
        (item) => item.transaction_type === transactionType
      );
      temp = filteredList;
    }
    // handle amount
    if (amount) {
      let filteredList = temp.filter((item) => item.amount.includes(amount));
      temp = filteredList;
    }
    return temp;
  }, [transactionData?.data, company, transactionType, amount]);
  return (
    <div className="transaction_history_container_wrapper">
      <div className="payment_filter_container flex gap-2 flex-wrap justify-end align-items-end mb-2">
        <div className="payment_filter_item">
          <div>Company</div>
          <Select
            style={{
              width: 200,
            }}
            defaultValue="All"
            className="report_company_selector parent_select "
            onChange={(value) => setCompany(value)}
            options={companies}
          />
        </div>
        <div className="payment_filter_item">
          <div>Transaction type</div>
          <Select
            style={{
              width: 200,
            }}
            defaultValue="All"
            className="report_company_selector parent_select "
            onChange={(value) => setTransactionType(value)}
            options={payment_type}
          />
        </div>
        <div className="payment_filter_item">
          <InputNumber
            type="number"
            min={0}
            style={{ width: "170px" }}
            placeholder="Search with amount"
            onChange={(e) => setAmount(e)}
          />
        </div>
      </div>
      <div className="transaction_history_container">
        {transactions.map((item, i) => (
          <TransactionCard data={item} key={i} />
        ))}
      </div>
    </div>
  );
};

export default TransactionHistory;