import { useRouter } from "next/router";
import AppBar from "@/components/layouts/AppBar";
import Layout from "@/components/layouts/Layout";
import WithAuth from "@/components/auth/WithAuth";
import { useCallback, useEffect, useRef, useState } from "react";
import { useAuth } from "@/core/utils/auth";
import apiOdoo from "@/core/utils/apiOdoo";
import currencyFormat from "@/core/utils/currencyFormat";
import { EllipsisVerticalIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import Link from "@/components/elements/Link";
import Pagination from "@/components/elements/Pagination";
import Alert from "@/components/elements/Alert";
import TransactionStatusBadge from "@/components/transactions/TransactionStatusBadge";
import { toast } from "react-hot-toast";
import useConfirmAlert from "@/lib/elements/hooks/useConfirmAlert";
import useBottomPopup from "@/lib/elements/hooks/useBottomPopup";

export default function Transactions() {
  const [ auth ] = useAuth();
  const router = useRouter();
  const { 
    q, 
    page = 1 
  } = router.query;

  const [ transactions, setTransactions ] = useState([]);

  const [ pageCount, setPageCount ] = useState(0);
  const [ isLoading, setIsLoading ] = useState(true);

  const searchQueryRef = useRef();
  const loadTransactions = useCallback(async () => {
    if (auth) {
      const limit = 10;
      let offset = (page - 1) * 10;
      let queryParams = [`limit=${limit}`, `offset=${offset}`];
      if (q) queryParams.push(`name=${q}`);
      queryParams = queryParams.join('&');
      queryParams = queryParams ? '?' + queryParams : '';

      const dataTransactions = await apiOdoo('GET', `/api/v1/partner/${auth.partner_id}/sale_order${queryParams}`);
      setTransactions(dataTransactions);
      setPageCount(Math.ceil(dataTransactions?.sale_order_total / limit));
      setIsLoading(false);
    };
  }, [ auth, q, page ]);

  useEffect(() => {
    loadTransactions();
  }, [ loadTransactions ]);

  const actionSearch = (e) => {
    e.preventDefault();
    let queryParams = [];
    if (searchQueryRef.current.value) queryParams.push(`q=${searchQueryRef.current.value}`);
    queryParams = queryParams.join('&');
    queryParams = queryParams ? `?${queryParams}` : '';
    router.push(`/my/transactions${queryParams}`);
  };

  const downloadPurchaseOrder = (data) => {
    const url = `${process.env.ODOO_HOST}/api/v1/partner/${auth.partner_id}/sale_order/${data.id}/download_po/${data.token}`;
    window.open(url, 'download');
    closePopup();
  };

  const downloadQuotation = (data) => {
    const url = `${process.env.ODOO_HOST}/api/v1/partner/${auth.partner_id}/sale_order/${data.id}/download/${data.token}`;
    window.open(url, 'download');
    closePopup();
  };

  const childrenPopup = (data) => (
    <div className="flex flex-col gap-y-6">
      <button 
        className="text-left disabled:opacity-60"
        disabled={!data?.purchase_order_file}
        onClick={() => downloadPurchaseOrder(data)}
      >
        Download PO
      </button>
      <button 
        className="text-left disabled:opacity-60"
        disabled={data?.status != 'draft'}
        onClick={() => downloadQuotation(data)}
      >
        Download Quotation
      </button>
      <button 
        className="text-left disabled:opacity-60" 
        disabled={ data?.status != 'waiting' }
        onClick={() => {openConfirmAlert(data); closePopup()}}
      >
        Batalkan Transaksi
      </button>
    </div>
  );

  const {
    closePopup,
    openPopup,
    BottomPopup
  } = useBottomPopup({
    title: 'Lainnya',
    children: childrenPopup
  });

  const submitCancelTransaction = async (data) => {
    const isCancelled = await apiOdoo('POST', `/api/v1/partner/${auth.partner_id}/sale_order/${data.id}/cancel`);
    if (isCancelled) {
      toast.success('Berhasil batalkan transaksi');
      loadTransactions();
    }
  }

  const {
    openConfirmAlert,
    ConfirmAlert
  } = useConfirmAlert({
    title: 'Batalkan Transaksi',
    caption: 'Apakah anda yakin untuk membatalkan transaksi?',
    closeText: 'Tidak',
    submitText: 'Ya, Batalkan',
    onSubmit: submitCancelTransaction
  });

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

        <form onSubmit={actionSearch} className="p-4 pb-0 flex gap-x-4">
          <input 
            type="text" 
            className="form-input" 
            placeholder="Cari Transaksi" 
            ref={searchQueryRef}
            defaultValue={q}
          />
          <button type="submit" className="border border-gray_r-7 rounded px-3">
            <MagnifyingGlassIcon className="w-5"/>
          </button>
        </form>

        <div className="p-4 flex flex-col gap-y-5">
          { transactions?.sale_order_total === 0 && !isLoading && (
            <Alert type="info" className="text-center">
              Transaksi tidak ditemukan
            </Alert>
          ) }
          { transactions?.sale_orders?.map((transaction, index) => (
            <div className="p-4 shadow border border-gray_r-3 rounded-md" key={index}>
              <div className="grid grid-cols-2">
                <Link href={`/my/transaction/${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">
                  <TransactionStatusBadge status={transaction.status} />
                  <EllipsisVerticalIcon className="w-5 h-5" onClick={() => openPopup(transaction)} />
                </div>
              </div>
              <Link href={`/my/transaction/${transaction.id}`}>
                <div className="grid grid-cols-2 mt-3">
                  <div>
                    <span className="text-caption-2 text-gray_r-11">No. Purchase Order</span>
                    <p className="mt-1 font-medium text-gray_r-12">{ transaction.purchase_order_name || '-' }</p>
                  </div>
                  <div className="text-right">
                    <span className="text-caption-2 text-gray_r-11">Total Invoice</span>
                    <p className="mt-1 font-medium text-gray_r-12">{ transaction.invoice_count } Invoice</p>
                  </div>
                </div>
                <div className="grid grid-cols-2 mt-3">
                  <div>
                    <span className="text-caption-2 text-gray_r-11">Sales</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>
                </div>
              </Link>
            </div>
          )) }
        </div>

        <div className="pb-6 pt-2">
          <Pagination currentPage={page} pageCount={pageCount} url={`/my/transactions${q ? `?q=${q}` : ''}`} />
        </div>

        { ConfirmAlert }
        { BottomPopup }
      </Layout>
    </WithAuth>
  );
};