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

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/partner/${auth.partner_id}/sale_order`);
        setTransactions(dataTransactions);
      };
    }
    loadTransactions();
  }, [ auth ]);

  return (
    <WithAuth>
      <Layout>
        <AppBar title="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="grid grid-cols-2">
                <Link href={`/my/transactions/${transaction.id}`}>
                  <span className="text-caption-2 text-gray_r-11">No. Transaksi</span>
                  <h2 className="text-red_r-11 mt-1">{ transaction.name }</h2>
                </Link>
                <div className="flex gap-x-1 justify-end">
                  <div className="badge-green h-fit">Pending</div>
                  <EllipsisVerticalIcon className="w-5 h-5" onClick={() => setActivePopupId(transaction.id)} />
                </div>
              </div>
              <Link href={`/my/transactions/${transaction.id}`} className="grid grid-cols-2 mt-3">
                <div>
                  <span className="text-caption-2 text-gray_r-11">Dilayani Oleh</span>
                  <p className="mt-1 font-medium text-gray_r-12">{ 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 text-gray_r-12">{ currencyFormat(transaction.amount_total) }</p>
                </div>
              </Link>
            </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>
  );
};