<template>
  <div :class="cn.m('underpaid')">
    <img
      src="/partially.svg"
      alt="Success"
      class="mb-16"
      data-status-illustration
    >

    <h2 class="text-clr-grey-600">
      Invoice has been partially paid
    </h2>

    <p :class="cn.e('total')">
      Total amount to be paid - <strong>{{ total }}</strong>
    </p>

    <div class="mt-32">
      <UiCoin :code="invoice.currencyCode" />

      <div :class="cn.e('collected-amount')">
        <span>Funds received</span>

        <MoneyAmount
          :value="invoice.collectedAmount"
          :currency="invoice.currencyCode"
        />
      </div>
    </div>

    <UiAlert type="warning" :class="cn.e('alert')">
      You need to deposit the missing part of the funds - <span style="white-space: nowrap">{{ missingAmount }}</span>, otherwise the bill will not be paid
    </UiAlert>

    <InvoiceFormDetails :class="cn.e('details')" accordion />

    <UiButton
      :class="cn.e('pay-additional')"
      size="large"
      @click="notify({ type: 'warning', id: 'wip', text: 'Work in progress' })"
    >
      Pay in addition
    </UiButton>

    <UiButton
      :class="cn.e('explorer')"
      type="link"
      color="secondary"
      :href="explorerLink"
      target="_blank"
    >
      Просмотреть в обозревателе блоков
    </UiButton>

    <InvoiceFormSeparator />
  </div>
</template>

<script setup>
import Decimal from 'decimal.js'

const { invoice } = inject('public-invoice')

const cn = useClassname('invoice-form')
const notify = useNotify()

const total = computed(() => $money.fullFormat(invoice.value.amount, invoice.value.currencyCode))
const missingAmount = computed(() => $money.fullFormat(Decimal.sub(invoice.value.amount, invoice.value.collectedAmount), invoice.value.currencyCode))
const explorerLink = computed(() => {
  return `https://nile.tronscan.org/#/address/${invoice.value.walletAddress}`
})
</script>

<style lang="scss">
.invoice-form {
  $self: &;

  &--underpaid {
    #{$self}__total {
      @include h4;

      color: $clr-grey-400;
      margin-top: 4px;

      strong {
        color: $clr-grey-500;
      }
    }

    #{$self}__collected-amount {
      @include h3('money-amount-value', true);

      display: inline-flex;
      flex-direction: column;
      text-align: left;
      margin-left: 8px;
      vertical-align: middle;

      > span {
        @include txt-r-m;

        color: $clr-grey-500;
      }
    }

    #{$self}__alert {
      margin-top: 32px;
      padding-block: 16px;
    }

    #{$self}__details {
      margin-top: 32px;
    }

    #{$self}__pay-additional {
      width: 100%;
      margin-top: 32px;
    }

    #{$self}__explorer {
      width: 100%;
      margin-top: 24px;
    }
  }
}
</style>
