import { useRouter } from "next/router"
import { useState } from "react"
import { toast } from "react-hot-toast"
import { EllipsisVerticalIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline"

import { downloadPurchaseOrder, downloadQuotation } from "../utils/transactions"
import useTransactions from "../hooks/useTransactions"
import currencyFormat from "@/core/utils/currencyFormat"
import cancelTransactionApi from "../api/cancelTransactionApi"
import TransactionStatusBadge from "./TransactionStatusBadge"
import Spinner from "@/core/components/elements/Spinner/Spinner"
import Link from "@/core/components/elements/Link/Link"
import BottomPopup from "@/core/components/elements/Popup/BottomPopup"
import Pagination from "@/core/components/elements/Pagination/Pagination"
import { toQuery } from "lodash-contrib"
import _ from "lodash"

const Transactions = () => {
  const router = useRouter()
  const {
    q = '',
    page = 1
  } = router.query

  const limit = 10

  const query = {
    name: q,
    offset: (page - 1) * limit,
    limit
  }

  const [ inputQuery, setInputQuery ] = useState(q)

  const { transactions } = useTransactions({ query })

  const [ toOthers, setToOthers ] = useState(null)
  const [ toDelete, setToDelete ] = useState(null)

  const submitCancelTransaction = async () => {
    const isCancelled = await cancelTransactionApi({
      partnerId: auth.partnerId,
      transaction: toDelete
    })
    if (isCancelled) {
      toast.success('Berhasil batalkan transaksi')
      transactions.refetch()
    }
    setToDelete(null)
  }

  const pageCount = Math.ceil(transactions?.data?.saleOrderTotal / limit)
  let pageQuery = _.omit(query, ['limit', 'offset'])
  pageQuery = _.pickBy(pageQuery, _.identity)
  pageQuery = toQuery(pageQuery)

  const handleSubmit = (e) => {
    e.preventDefault()
    router.push(`/my/transactions?q=${inputQuery}`)
  } 

  return (
    <div className="p-4">
      <div className="flex flex-col gap-y-4">
        <form className="flex gap-x-3" onSubmit={handleSubmit}>
          <input 
            type="text" 
            className="form-input" 
            placeholder="Cari Transaksi..."
            value={inputQuery}
            onChange={(e) => setInputQuery(e.target.value)}
          />
          <button 
            className="btn-light bg-transparent px-3"
            type="submit"
          >
            <MagnifyingGlassIcon className="w-6" />
          </button>
        </form>
        { transactions.isLoading && (
          <div className="flex justify-center my-4">
            <Spinner className="w-6 text-gray_r-12/50 fill-gray_r-12" />
          </div>
        ) }
        { transactions.data?.saleOrders?.map((saleOrder, 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/${saleOrder.id}`}>
                <span className="text-caption-2 text-gray_r-11">No. Transaksi</span>
                <h2 className="text-red_r-11 mt-1">{ saleOrder.name }</h2>
              </Link>
              <div className="flex gap-x-1 justify-end">
                <TransactionStatusBadge status={saleOrder.status} />
                <EllipsisVerticalIcon className="w-5 h-5" onClick={() => setToOthers(saleOrder)} />
              </div>
            </div>
            <Link href={`/my/transaction/${saleOrder.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">{ saleOrder.purchaseOrderName || '-' }</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">{ saleOrder.invoiceCount } 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">{ saleOrder.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(saleOrder.amountTotal) }</p>
                </div>
              </div>
            </Link>
          </div>
        )) }
        
        <Pagination
          pageCount={pageCount}
          currentPage={parseInt(page)} 
          url={`/my/transactions${pageQuery}`}
          className="mt-2 mb-2"
        />
      </div>

      <BottomPopup title="Lainnya" active={toOthers} close={() => setToOthers(null)}>
        <div className="flex flex-col gap-y-4 mt-2">
          <button 
            className="text-left disabled:opacity-60"
            disabled={!toOthers?.purchaseOrderFile}
            onClick={() => { downloadPurchaseOrder(auth.partnerId, toOthers); setToOthers(null) }}
          >
            Download PO
          </button>
          <button 
            className="text-left disabled:opacity-60"
            disabled={toOthers?.status != 'draft'}
            onClick={() => { downloadQuotation(auth.partnerId, toOthers); setToOthers(null) }}
          >
            Download Quotation
          </button>
          <button 
            className="text-left disabled:opacity-60" 
            disabled={ toOthers?.status != 'waiting' }
            onClick={() => { setToDelete(toOthers); setToOthers(null) }}
          >
            Batalkan Transaksi
          </button>
        </div>
      </BottomPopup>

      <BottomPopup
        active={toDelete}
        close={() => setToDelete(null)}
        title="Batalkan Transaksi"
      >
        <div className="leading-7 text-gray_r-12/80">
          Apakah anda yakin membatalkan transaksi <span className="underline">{toDelete?.name}</span>?
        </div>
        <div className="flex mt-6 gap-x-4">
          <button 
            className="btn-solid-red flex-1" 
            type="button"
            onClick={() => submitCancelTransaction()}
          >
            Ya, Batalkan
          </button>
          <button 
            className="btn-light flex-1" 
            type="button"
            onClick={() => setToDelete(null)}
          >
            Batal
          </button>
        </div>
      </BottomPopup>
    </div>
  )
}

export default Transactions