import WithAuth from "@/components/auth/WithAuth"
import Alert from "@/components/elements/Alert"
import Link from "@/components/elements/Link"
import Pagination from "@/components/elements/Pagination"
import AppBar from "@/components/layouts/AppBar"
import Layout from "@/components/layouts/Layout"
import apiOdoo from "@/core/utils/apiOdoo"
import { useAuth } from "@/core/utils/auth"
import currencyFormat from "@/core/utils/currencyFormat"
import useBottomPopup from "@/lib/elements/hooks/useBottomPopup"
import { CheckIcon, ClockIcon, EllipsisVerticalIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline"
import { useRouter } from "next/router"
import { useEffect, useRef, useState } from "react"

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

  const [ invoices, setInvoices ] = useState([])

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

  const searchQueryRef = useRef()

  useEffect(() => {
    const loadInvoices = 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 dataInvoices = await apiOdoo('GET', `/api/v1/partner/${auth.partner_id}/invoice${queryParams}`)
        setInvoices(dataInvoices)
        setPageCount(Math.ceil(dataInvoices.sale_order_total / limit))
        setIsLoading(false)
      }
    }
    loadInvoices()
  }, [ auth, q, page ])

  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/invoices${queryParams}`)
  }

  const downloadInvoice = (data) => {
    const url = `${process.env.ODOO_HOST}/api/v1/download/invoice/${data.id}/${data.token}`
    window.open(url, 'download')
    closePopup()
  }
  
  const downloadTaxInvoice = (data) => {
    const url = `${process.env.ODOO_HOST}/api/v1/download/tax-invoice/${data.id}/${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"
        onClick={() => downloadInvoice(data)}
      >
        Download Faktur Pembelian
      </button>
      <button 
        className="text-left disabled:opacity-60"
        disabled={!data?.efaktur}
        onClick={() => downloadTaxInvoice(data)}
      >
        Download Faktur Pajak
      </button>
    </div>
  )

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

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

        <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">
          { invoices?.invoice_total === 0 && !isLoading && (
            <Alert type="info" className="text-center">
              Invoice tidak ditemukan
            </Alert>
          ) }
          { invoices?.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.amount_residual > 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={() => openPopup(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.invoice_date }
                  </p>
                  <p className="text-right">
                    { invoice.payment_term }
                  </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.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">{ currencyFormat(invoice.amount_total) }</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>
          )) }
        </div>

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