import { useRouter } from "next/router";
import AppBar from "../../../components/AppBar";
import BottomPopup from "../../../components/BottomPopup";
import Layout from "../../../components/Layout";
import WithAuth from "../../../components/WithAuth";
import { useEffect, useState } from "react";
import { useAuth } from "../../../helpers/auth";
import apiOdoo from "../../../helpers/apiOdoo";
import currencyFormat from "../../../helpers/currencyFormat";
import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";

export default function Transactions() {
  const [ auth ] = useAuth();
  const router = useRouter();

  const [ transactions, setTransactions ] = useState([]);
  const [ activePopupId, setActivePopupId ] = useState(null);

  useEffect(() => {
    const loadTransactions = async () => {
      if (auth) {
        const dataTransactions = await apiOdoo('GET', `/api/v1/sale_order?partner_id=${auth?.partner_id}`);
        setTransactions(dataTransactions);
      };
    }
    loadTransactions();
  }, [ auth ]);

  return (
    <WithAuth>
      <Layout>
        <AppBar title="Daftar Transaksi" />

        <div className="p-4 flex flex-col gap-y-4">
          { transactions?.sale_orders?.map((transaction, index) => (
            <div className="p-4 border border-gray_r-7 rounded-md" key={index}>
              <div className="flex justify-between">
                <div>
                  <span className="text-caption-2 text-gray_r-11">No. Transaksi</span>
                  <h2 className="text-red_r-11 mt-1">{ transaction.name }</h2>
                </div>
                <div className="flex gap-x-1">
                  <div className="badge-green h-fit">Pending</div>
                  <EllipsisVerticalIcon className="w-5 h-5" onClick={() => setActivePopupId(transaction.id)} />
                </div>
              </div>
              <div className="flex mt-2 justify-between">
                <div>
                  <span className="text-caption-2 text-gray_r-11">Dilayani Oleh</span>
                  <p className="mt-1 font-medium">{ transaction.sales }</p>
                </div>
                <div className="text-right">
                  <span className="text-caption-2 text-gray_r-11">Total Harga</span>
                  <p className="mt-1 font-medium">{ currencyFormat(transaction.amount_total) }</p>
                </div>
              </div>
            </div>
          )) }
        </div>
        
        { transactions?.sale_orders?.length > 0 && (
          <BottomPopup 
            title="Lainnya"
            active={activePopupId} 
            closePopup={() => setActivePopupId(null)}
          >
            <div className="flex flex-col gap-y-4">
              <p>Download Quotation</p>
              <p>Batalkan Transaksi</p>
            </div>
          </BottomPopup>
        ) }
      </Layout>
    </WithAuth>
  );
};