import React, { useMemo, useState } from "react";
import PaymentCard from "./PaymentCard/PaymentCard";
import { useGetPayments } 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: "Cash",
    value: "CASH",
  },
  {
    label: "Khalti",
    value: "Khalti",
  },
];
/**
 * Represents the PaymentHistory component
 * @module Profile/PaymentHistory
 * @return {JSX.Element}
 */
const PaymentHistory = () => {
  /**
   * React query hook that fetches the payment data
   * @name useGetPayments
   * @type {Function}
   * @memberof module:Profile/PaymentHistory
   */
  const { data: paymentData, isLoading } = useGetPayments();
  /**
   * React state that stores the company value
   * @name company
   * @type {String}
   * @default useState("")
   * @memberof module:Profile/PaymentHistory
   */
  const [company, setCompany] = useState("");
  /**
   * React state that stores the payment type value
   * @name paymentType
   * @type {String}
   * @default useState("")
   * @memberof module:Profile/PaymentHistory
   */
  const [paymentType, setPaymentType] = useState("");
  /**
   * React state that stores the amount value
   * @name amount
   * @type {String}
   * @default useState("")
   * @memberof module:Profile/PaymentHistory
   */
  const [amount, setAmount] = useState(null);
  /**
   * React hook that memoizes the payment data
   * @name payments
   * @memberof module:Profile/PaymentHistory
   *
   * @type {*|*[]}
   */
  const payments = useMemo(() => {

    let temp = paymentData?.data?.data?.results || [];
    //handle company select
    if (company) {
      const filteredList = temp.filter((item) => item.company_name === company);
      temp = filteredList;
    }
    // handle payment type
    if (paymentType) {
      const filteredList = temp.filter(
        (item) => item.payment_type === paymentType
      );
      temp = filteredList;
    }
    // handle amount
    if (amount) {
      let filteredList = temp.filter((item) => item.amount.includes(amount));
      temp = filteredList;
    }
    return temp;
  }, [paymentData?.data, company, paymentType, amount]);
  return (
    <div className="payment_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>Payment method</div>
          <Select
            style={{
              width: 200,
            }}
            defaultValue="All"
            className="report_company_selector parent_select "
            onChange={(value) => setPaymentType(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="payment_history_container">
        {payments?.map((item, i) => (
          <PaymentCard data={item} key={i} />
        ))}
      </div>
    </div>
  );
};

export default PaymentHistory;