<template>
  <UiAccordion
    active-icon="disclosure-up"
    inactive-icon="disclosure-down"
    :model-value="accordion ? undefined : 'details'"
    :disabled="!accordion"
  >
    <UiAccordionItem id="details" :class="cn.b()">
      <template #title>
        <p :class="cn.e('title')">
          Payment details
        </p>
      </template>

      <template #default>
        <dl :class="cn.e('list')">
          <!--          <dt>Date</dt> -->
          <!--          <dd>22 сент. 2022г., 11:27</dd> -->

          <dt>Status</dt>
          <dd :class="[cn.e('status-text'), invoice.status]">
            {{ statusText }}
          </dd>

          <dt>Blockchain</dt>
          <dd>
            TRON
          </dd>

          <dt>Sender</dt>
          <dd>
            <TextShortener :text="invoice.transfers?.[0]?.sender" />
          </dd>

          <dt>Recipient</dt>
          <dd>
            <TextShortener :text="invoice.transfers?.[0]?.recipient" />
          </dd>

          <dt>TXID</dt>
          <dd>
            <TextShortener :text="invoice.transfers?.[0]?.txID" />
          </dd>
        </dl>
      </template>
    </UiAccordionItem>
  </UiAccordion>
</template>

<script setup>
defineProps({
  accordion: Boolean,
})

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

const cn = useClassname('invoice-form-details')

const statusText = computed(() => {
  switch (invoice.value.status) {
    case 'completed':
      return 'Payment success'
    case 'underpaid':
      return 'Invoice has been partially paid'
    case 'overpaid':
      return 'Invoice has been over paid'
  }
})
</script>

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

  --accordion-head-padding: 16px;
  --accordion-head-active-padding: 16px;
  --accordion-content-padding: 0 16px 16px;

  text-align: left;
  outline: none !important;

  &:hover,
  &.is-active {
    background-color: $clr-grey-100;
  }

  &__title {
    @include txt-l-m;
  }

  &__list {
    @include txt-r-m;
    @include txt-r-m('text-shortener', true);

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 16px;
    margin: 0;
    color: $clr-grey-500;

    dt, dd {
      margin: 0;
    }

    dt {
      color: $clr-grey-600;
    }

    dd {
      text-align: right;
    }
  }

  &__status-text {
    color: $clr-warn-500;

    &.completed {
      color: $clr-green-500;
    }
  }
}
</style>
