import { CheckIcon, ClockIcon, EllipsisVerticalIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline"
import { toQuery } from "lodash-contrib"
import _ from "lodash"
import { useRouter } from "next/router"
import { useState } from "react"
import useInvoices from "../hooks/useInvoices"
import Spinner from "@/core/components/elements/Spinner/Spinner"
import Alert from "@/core/components/elements/Alert/Alert"
import Pagination from "@/core/components/elements/Pagination/Pagination"
import Link from "@/core/components/elements/Link/Link"
import currencyFormat from "@/core/utils/currencyFormat"
import BottomPopup from "@/core/components/elements/Popup/BottomPopup"
import { downloadInvoice, downloadTaxInvoice } from "../utils/invoices"

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

  const limit = 10

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

  const [ inputQuery, setInputQuery ] = useState(q)
  const [ toOthers, setToOthers ] = useState(null)

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

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

  return (
    <div className="p-4 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>

      { invoices.isLoading && (
        <div className="flex justify-center my-4">
          <Spinner className="w-6 text-gray_r-12/50 fill-gray_r-12" />
        </div>
      ) }

      { !invoices.isLoading && invoices.data?.invoices?.length === 0 && (
        <Alert type="info" className="text-center">
          Tidak ada data transaksi
        </Alert>
      ) }

      { invoices.data?.invoices?.map((invoice, index) => (
        <div className="p-4 shadow border border-gray_r-3 rounded-md" key={index}>
          <div className="grid grid-cols-2">
            <Link href={`/my/invoice/${invoice.id}`}>
              <span className="text-caption-2 text-gray_r-11">No. Invoice</span>
              <h2 className="text-red_r-11 mt-1">{ invoice.name }</h2>
            </Link>
            <div className="flex gap-x-1 justify-end">
              { invoice.amountResidual > 0 ? (
                <div className="badge-solid-red h-fit ml-auto">Belum Lunas</div>
                ) : (
                <div className="badge-solid-green h-fit ml-auto">Lunas</div>
              ) }
              <EllipsisVerticalIcon className="w-5 h-5" onClick={() => setToOthers(invoice)} />
            </div>
          </div>
          <Link href={`/my/invoice/${invoice.id}`}>
            <div className="grid grid-cols-2 text-caption-2 text-gray_r-11 mt-2 font-normal">
              <p>
                { invoice.invoiceDate }
              </p>
              <p className="text-right">
                { invoice.paymentTerm }
              </p>
            </div>
            <hr className="my-3"/>
            <div className="grid grid-cols-2">
              <div>
                <span className="text-caption-2 text-gray_r-11">No. Purchase Order</span>
                <p className="mt-1 font-medium text-gray_r-12">{ invoice.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">{ currencyFormat(invoice.amountTotal) }</p>
              </div>
            </div>
          </Link>
          { invoice.efaktur ? (
            <div className="badge-green h-fit mt-3 ml-auto flex items-center gap-x-0.5">
              <CheckIcon className="w-4 stroke-2" />
              Faktur Pajak
            </div>
            ) : (
            <div className="badge-red h-fit mt-3 ml-auto flex items-center gap-x-0.5">
              <ClockIcon className="w-4 stroke-2" />
              Faktur Pajak
            </div>
          ) }
        </div>
      )) }

      <Pagination
        pageCount={pageCount}
        currentPage={parseInt(page)} 
        url={`/my/invoices${pageQuery}`}
        className="mt-2 mb-2"
      />

      <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"
            onClick={() => { downloadInvoice(toOthers); setToOthers(null) }}
          >
            Download Invoice
          </button>
          <button 
            className="text-left disabled:opacity-60"
            disabled={!toOthers?.efaktur}
            onClick={() => { downloadTaxInvoice(toOthers); setToOthers(null) }}
          >
            Download Faktur Pajak
          </button>
        </div>
      </BottomPopup>
    </div>
  )
}

export default Invoices