import Spinner from "@/core/components/elements/Spinner/Spinner"
import useInvoice from "../hooks/useInvoice"
import { downloadInvoice, downloadTaxInvoice } from "../utils/invoices"
import Divider from "@/core/components/elements/Divider/Divider"
import VariantGroupCard from "@/lib/variant/components/VariantGroupCard"
import currencyFormat from "@/core/utils/currencyFormat"

const Invoice = ({ id }) => {
  const { invoice } = useInvoice({ id })

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

  const address = invoice.data?.customer
  let fullAddress = []
  if (address?.street) fullAddress.push(address.street)
  if (address?.subDistrict?.name) fullAddress.push(address.subDistrict.name)
  if (address?.district?.name) fullAddress.push(address.district.name)
  if (address?.city?.name) fullAddress.push(address.city.name)
  fullAddress = fullAddress.join(', ')

  return invoice.data?.name && (
    <>
      <div className="flex flex-col gap-y-4 p-4">
        <DescriptionRow label="No Invoice">
          { invoice.data?.name }
        </DescriptionRow>
        <DescriptionRow label="Status Transaksi">
          { invoice.data?.amountResidual > 0 ? (
            <span className="badge-solid-red">Belum Lunas</span>
            ) : (
            <span className="badge-solid-green">Lunas</span>
          ) }
        </DescriptionRow>
        <DescriptionRow label="Purchase Order">
          { invoice.data?.purchaseOrderName || '-' }
        </DescriptionRow>
        <DescriptionRow label="Ketentuan Pembayaran">
          { invoice.data?.paymentTerm }
        </DescriptionRow>
        { invoice.data?.amountResidual > 0 && invoice.invoiceDate != invoice.invoiceDateDue && (
          <DescriptionRow label="Tanggal Jatuh Tempo">
            { invoice.data?.invoiceDateDue }
          </DescriptionRow>
        ) }
        <DescriptionRow label="Nama Sales">
          { invoice.data?.sales }
        </DescriptionRow>
        <DescriptionRow label="Tanggal Invoice">
          { invoice.data?.invoiceDate }
        </DescriptionRow>
        <div className="flex items-center">
          <p className="text-gray_r-11 leading-none">Faktur Pembelian</p>
          <button 
            type="button"
            className="btn-light py-1.5 px-3 ml-auto"
            onClick={() => downloadInvoice(invoice.data)}
          >
            Download
          </button>
        </div>
        <div className="flex items-center">
          <p className="text-gray_r-11 leading-none">Faktur Pajak</p>
          <button 
            type="button"
            className="btn-light py-1.5 px-3 ml-auto"
            onClick={() => downloadTaxInvoice(invoice.data)}
            disabled={!invoice.data?.efaktur}
          >
            Download
          </button>
        </div>
      </div>

      <Divider />

      <div className="p-4 font-medium">
        Detail Penagihan
      </div>
      
      <div className="flex flex-col gap-y-4 p-4 border-t border-gray_r-6">
        <DescriptionRow label="Nama">
          { address?.name }
        </DescriptionRow>
        <DescriptionRow label="Email">
          { address?.email || '-' }
        </DescriptionRow>
        <DescriptionRow label="No Telepon">
          { address?.mobile || '-' }
        </DescriptionRow>
        <DescriptionRow label="Alamat">
          { fullAddress }
        </DescriptionRow>
      </div>

      <Divider />

      <div className="font-medium p-4">Detail Produk</div>

      <div className="p-4 pt-0 flex flex-col gap-y-3">
        <VariantGroupCard 
          variants={invoice.data?.products} 
          buyMore 
        />
        <div className="flex justify-between mt-3 font-medium">
          <p>Total Belanja</p>
          <p>{ currencyFormat(invoice.data?.amountTotal) }</p>
        </div>
      </div>
    </>
  )
}

const DescriptionRow = ({ children, label }) => (
  <div className="grid grid-cols-2">
    <span className="text-gray_r-11">{ label }</span>
    <span className="text-right">{ children }</span>
  </div>
)

export default Invoice