import Spinner from "@/core/components/elements/Spinner/Spinner"
import useTransaction from "../hooks/useTransaction"
import TransactionStatusBadge from "./TransactionStatusBadge"
import Divider from "@/core/components/elements/Divider/Divider"
import { useRef, useState } from "react"
import { downloadPurchaseOrder } from "../utils/transactions"
import BottomPopup from "@/core/components/elements/Popup/BottomPopup"
import uploadPoApi from "../api/uploadPoApi"
import { toast } from "react-hot-toast"
import getFileBase64 from "@/core/utils/getFileBase64"
import currencyFormat from "@/core/utils/currencyFormat"
import VariantGroupCard from "@/lib/variant/components/VariantGroupCard"

const Transaction = ({ id }) => {
  const { transaction } = useTransaction({ id })

  const poNumber = useRef('')
  const poFile = useRef('')
  const [ uploadPo, setUploadPo ] = useState(false)
  const openUploadPo = () => setUploadPo(true)
  const closeUploadPo = () => setUploadPo(false)
  const submitUploadPo = async () => {
    const file = poFile.current.files[0]
    const name = poNumber.current.value
    if (typeof file === 'undefined' || !name) {
      toast.error('Nomor dan Dokumen PO harus diisi', { position: 'bottom-center' })
      return
    }
    if (file.size > 5000000) {
      toast.error('Maksimal ukuran file adalah 5MB', { position: 'bottom-center' })
      return
    }
    const data = { name, file: await getFileBase64(file) }
    const isUploaded = await uploadPoApi({ id, data })
    if (isUploaded) {
      toast.success('Berhasil upload PO')
      transaction.refetch()
      closeUploadPo()
      return
    }
    toast.error('Terjadi kesalahan internal, coba lagi nanti atau hubungi kami')
  }

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

      { transaction.data?.name && (
        <>
          <div className="flex flex-col gap-y-4 p-4">
            <DescriptionRow label="Status Transaksi">
              <div className="flex justify-end">
                <TransactionStatusBadge status={transaction.data?.status} />
              </div>
            </DescriptionRow>
            <DescriptionRow label="No Transaksi">
              { transaction.data?.name }
            </DescriptionRow>
            <DescriptionRow label="Ketentuan Pembayaran">
              { transaction.data?.paymentTerm }
            </DescriptionRow>
            <DescriptionRow label="Nama Sales">
              { transaction.data?.sales }
            </DescriptionRow>
            <DescriptionRow label="Waktu Transaksi">
              { transaction.data?.dateOrder }
            </DescriptionRow>
          </div>
          
          <Divider />

          <div className="p-4 flex flex-col gap-y-4">
            <DescriptionRow label="Purchase Order">
              { transaction.data?.purchaseOrderName || '-' }
            </DescriptionRow>
            <div className="flex items-center">
              <p className="text-gray_r-11 leading-none">Dokumen PO</p>
              <button 
                type="button"
                className="btn-light py-1.5 px-3 ml-auto"
                onClick={transaction.data?.purchaseOrderFile ? () => downloadPurchaseOrder(transaction.data) : openUploadPo}
              >
                { transaction.data?.purchaseOrderFile ? 'Download' : 'Upload' }
              </button>
            </div>
          </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={transaction.data?.products} 
              buyMore 
            />
            <div className="flex justify-between mt-3 font-medium">
              <p>Total Belanja</p>
              <p>{ currencyFormat(transaction.data?.amountTotal) }</p>
            </div>
          </div>

          <Divider />

          <BottomPopup
            title="Upload PO"
            close={closeUploadPo}
            active={uploadPo}
          >
            <div>
              <label>Nomor PO</label>
              <input type="text" className="form-input mt-3" ref={poNumber} />
            </div>
            <div className="mt-4">
              <label>Dokumen PO</label>
              <input type="file" className="form-input mt-3 py-2" ref={poFile} />
            </div>
            <div className="grid grid-cols-2 gap-x-3 mt-6">
              <button 
                type="button"
                className="btn-light w-full"
                onClick={closeUploadPo}
              >Batal</button>
              <button 
                type="button"
                className="btn-solid-red w-full"
                onClick={submitUploadPo}
              >Upload</button>
            </div>
          </BottomPopup>
        </>
      )}

    </>
  )
}

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 Transaction