<template>
  <div :class="cn.m('requisites')">
    <div
      class="d-flex"
      style="gap: 16px"
    >
      <InvoiceFormInstructions />

      <UiQrCode
        :class="cn.e('qr')"
        :value="invoice.walletAddress"
        :size="139"
      />
    </div>

    <UiInput
      id="address"
      :class="cn.e('address')"
      label="Адрес кошелька для оплаты"
      :model-value="invoice.walletAddress"
      readonly
      copyable
    />

    <InvoiceFormSeparator />

    <InvoiceFormAmount />

    <UiButton
      class="action"
      size="large"
      :class="cn.e('action')"
      :disabled="payedFlag"
      @click="payedFlag = true"
    >
      I have paid
    </UiButton>
  </div>
</template>

<script setup>
const { invoice, payedFlag } = inject('public-invoice')

const cn = useClassname('invoice-form')
</script>

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

  &--requisites {
    #{$self}__qr {
      width: 139px;
      height: 139px;
    }

    #{$self}__address {
      margin-top: 8px;
    }

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