<template>
  <div>
    <q-card class="full-width no-shadow" style="max-width: 480px">
      <q-card-section>
        <div class="text-h6">
          {{ $t('registries.objectCard.documentSignature') }}
        </div>
      </q-card-section>
      <q-card-section class="q-gutter-y-md">
        <q-banner class="bg-grey-1">
          <template #avatar>
            <q-icon color="positive" name="check_circle_outline" />
          </template>
          <div>{{ $t('registries.objectCard.signatureIsValid') }}</div>
        </q-banner>
        <table class="text-primary">
          <tr>
            <td>
              <q-item>
                <q-item-section>
                  <q-item-label class="text-grey-9">
                    {{ $t('registries.objectCard.signed') }}
                  </q-item-label>
                </q-item-section>
              </q-item>
            </td>
            <td>
              <q-item>
                <q-item-section>
                  <q-item-label>
                    {{ signature.issuerName }}
                  </q-item-label>
                </q-item-section>
              </q-item>
            </td>
          </tr>
          <tr>
            <td>
              <q-item>
                <q-item-section>
                  <q-item-label class="text-grey-9">
                    {{ $t('registries.objectCard.certificatePublisher') }}
                  </q-item-label>
                </q-item-section>
              </q-item>
            </td>
            <td>
              <q-item>
                <q-item-section>
                  <q-item-label>
                    {{ signature.subjectName }}
                  </q-item-label>
                </q-item-section>
              </q-item>
            </td>
          </tr>
          <tr>
            <td>
              <q-item>
                <q-item-section>
                  <q-item-label class="text-grey-9">
                    {{ $t('registries.objectCard.document') }}
                  </q-item-label>
                </q-item-section>
              </q-item>
            </td>
            <td>
              <q-item>
                <q-item-section>
                  <q-item-label>
                    {{ signature.s3Name }}
                  </q-item-label>
                </q-item-section>
              </q-item>
            </td>
          </tr>
          <tr>
            <td>
              <q-item>
                <q-item-section>
                  <q-item-label class="text-grey-9">
                    {{ $t('registries.objectCard.download') }}
                  </q-item-label>
                </q-item-section>
              </q-item>
            </td>
            <td>
              <q-item>
                <q-item-section>
                  <q-item-label>
                    <q-btn
                      :label="$t('registries.objectCard.signedFile')"
                      icon="attach_file"
                      outline
                      @click="saveSignature()"
                    />
                  </q-item-label>
                </q-item-section>
              </q-item>
            </td>
          </tr>
        </table>
      </q-card-section>
    </q-card>
  </div>
</template>

<script lang="ts">
import { saveAs } from 'file-saver';
import S3UrlSignerFilesService from '@services/s3urlsigner/files';
import { Component, Prop, PropSync, Vue } from 'vue-property-decorator';
import get from 'lodash/get';
import { notifyError } from '@utils/notify';

@Component({
  methods: {
    get,
  },
})
export default class SummonDialog extends Vue {
  @PropSync('openDialog') open?: boolean;
  @Prop() schema!: string;
  @Prop() model: any;
  @Prop() signature: any;
  private get fileName(): string {
    return this.model?.title ?? this.$t('registries.unnamed').toString();
  }

  async saveSignature(): Promise<void> {
    const url = this.signature?.sigS3url;

    if (url) {
      try {
        const { file } = await S3UrlSignerFilesService.fetchFileFromS3ByUrl({
          url: url,
        });

        saveAs(file, `${this.fileName}.sig`);
      } catch (e) {
        notifyError(e.message.toString());
      }
    }
  }
}
</script>
