<script setup lang="ts">
  import Converter from "number-to-words"

  const props = defineProps(["invoice", "total"])

  import { onMounted, ref } from "vue"
 import  User from "./../classes/user.js"
 import axios from "axios"

  const user = ref()

  // temporarily using this
  // TODO: don't call api from PrintPreview
  const getUser = async () => {
    user.value = new User()

    try {
      const r = await axios.get('/user')
      if (r.status === 200) {
        user.value = r.data.data
      }
    } catch (err) {
      console.error(err)
    }
  }

  // TODO: remove
  onMounted(() => {
    getUser()
  })
</script>

<template>
  <div class="print-preview-footer">
    <div class="footer--col1">
      <div class="footer--col1--row1">
        <p class="total-words">
          <strong>Total (in words):</strong>
          {{ Number.isFinite(props.total.TotalWithGST.value) && `${Converter.toWords(props.total.TotalWithGST.value)} only` }}
        </p>
      </div>

      <div class="footer--col1--row2">
        <div v-for="cf in props.invoice.CustomFields" :key="cf.ID" class="cf-wrapper">
          <div class="cf-key">
            <strong>{{ cf.Key }}:</strong>
          </div>
          <div class="cf-value">
            {{ cf.Value }}
          </div>
        </div>
      </div>

      <div class="footer--col1--row3">
        <div>
          <strong>Note:</strong>
        </div>
        <div>
          {{ props.invoice.Note }}
        </div>
      </div>
    </div>
    <div class="footer--col2">
      <div class="total-summary">
        <span class="total-summary-row">
          <span><strong>Total Before Tax</strong></span>
          <span>{{props.total.TotalWithoutGST}}</span>
        </span>

        <span class="total-summary-row">
          <span><strong>Total Tax Amount</strong></span>
          <span>{{props.total.TotalGSTValue}}</span>
        </span>

        <span class="total-summary-row">
          <span><strong>Total Amount</strong></span>
          <span>{{props.total.TotalWithGST}}</span>
        </span>
      </div>
      <div class="firm-signature-wrapper">
        <div class="tiny">
          Certified that the particulars given above are true and correct.
        </div>

        <div class="large">
          For, {{ invoice.IssuerFirmName }}
        </div>

        <div class="signature-container">
          <!-- TODO: either show user's signature or a placeholder. maybe use css instead of a whole placeholder png. -->
          <!--img src="../assets/DefaultSignaturePlaceholder.png"/-->
          <img :src="'/pub/' + user.SignatureFile"/>
        </div>

        <div class="tiny">
          Authorized Signatory
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.total-words {
  text-transform: capitalize;
}
.footer--col1--row1 {
  border-bottom: 1px solid gray;
  padding: 0.1em 0.3em;
}
.print-preview-footer {
  border: 1px solid gray;
  display: grid;
  grid-template-columns: 4fr 3fr;
  width: 100%;
}
.footer--col1 {
  border-right: 1pt solid gray;
  display: grid;
  grid-template-rows: 2fr 4fr 6fr;
}
.footer--col2 {
  display: grid;
  grid-template-rows: 2fr 3fr;
}
.firm-signature-wrapper {
  padding: 0.1em 0.3em;
  border-top: 1px solid gray;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.firm-signature-wrapper .signature-container {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1.7in;
}
.firm-signature-wrapper img {
  max-width: 100%;
  max-height: 100%;
}
.total-summary {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0.1em 0.3em;
  grid-auto-rows: 1.1rem;
}
.total-summary-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.footer--col1--row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1.1rem;
  white-space: pre-wrap;
  padding: 0.1em 0.3em;
}
.footer--col1--row2 .cf-wrapper {
  display: flex;
  gap: 0.4em;
}
.footer--col1--row3 {
  display: grid;
  grid-template-rows: 1.3em 1fr;
  white-space: pre-wrap;
  line-height: 1.3;
  padding: 0.1em 0.3em;
  border-top: 1px solid gray;
}
.firm-signature-wrapper .tiny {
  font-size: .8em;
  font-weight: bold;
}
.firm-signature-wrapper .large {
  font-size: 1.3em;
  font-weight: bold;
}
</style>
