<template>
  <q-scroll-area
    data-test-id="settings-openpgp-my-keys-page"
    :thumb-style="{width: '5px'}"
    class="myKeys__list q-px-lg q-pt-lg"
  >
    <div class="q-mb-md text-body1 text-weight-bold">
      {{ $t('OPENPGPWEBCLIENT.LABEL_PUBLIC_KEYS') }}
    </div>

    <div v-if="!myPublicKeys.length">
      {{ $t('OPENPGPWEBCLIENT.ERROR_NO_PUBLIC_KEYS_FOR_USERS_PLURAL') }}
    </div>

    <OpenPgpTab v-for="key in myPublicKeys" :key="key" :label="key.email" @click="openKey(key)" />

    <div class="q-my-md text-body1 text-weight-bold">
      {{ $t('OPENPGPWEBCLIENT.LABEL_PRIVATE_KEYS') }}
    </div>

    <div v-if="!myPrivateKeys.length">
      {{ $t('OPENPGPWEBCLIENT.ERROR_NO_PRIVATE_KEYS_FOR_USERS_PLURAL') }}
    </div>

    <OpenPgpTab v-for="key in myPrivateKeys" :key="key" :label="key.email" @click="openVerifyDialog(key)" />
  </q-scroll-area>

  <div class="q-pa-lg full-width flex items-center">
    <div class="full-width">
      <AppButton
        data-test-id="settings-openpgp-generate"
        @click="showGenerateKeys = true"
        :label="$t('OPENPGPWEBCLIENT.ACTION_GENERATE_NEW_KEY')"
      />
      <AppButton
        data-test-id="settings-openpgp-import-text"
        @click="showImportKeys = true"
        :label="$t('OPENPGPMOBILEWEBCLIENT.ACTION_IMPORT_KEY_TEXT')"
        class="q-mt-lg"
      />
      <AppButton
        data-test-id="settings-openpgp-import-file"
        @click="getFiles"
        :label="$t('OPENPGPMOBILEWEBCLIENT.ACTION_IMPORT_KEY_FILE')"
        class="q-mt-lg"
      />
      <q-file ref="fileInput" v-model="files" class="hidden" multiple />
    </div>
  </div>

  <GenerateKeyDialog v-model="showGenerateKeys" @close="showGenerateKeys = false" />
  <ImportKeyDialog v-model="showImportKeys" @close="showImportKeys = false" @clear-files="clearFiles" />
</template>

<script>
import { mapActions, mapGetters } from 'pinia'
import { useOpenPGPStore, useCoreStore } from 'src/stores/index-all'

import AppButton from 'src/components/common/AppButton'

import GenerateKeyDialog from './dialogs/GenerateKeyDialog'
import ImportKeyDialog from './dialogs/ImportKeyDialog'
import OpenPgpTab from './OpenPgpTab'
import { askOpenPgpKeyPassword } from "../../utils";
import { verifyPrivateKeyPassword } from "../../openpgp-utils";
import notification from "src/utils/notification";

export default {
  name: 'MyKeys',
  components: {
    OpenPgpTab,
    GenerateKeyDialog,
    ImportKeyDialog,
    // KeyItem: OpenPgpTab,
    AppButton,
  },
  data: () => ({
    showGenerateKeys: false,
    showImportKeys: false,
    files: [],
  }),
  watch: {
    async files() {
      if (this.files.length) {
        const filesList = []
        for (const file of this.files) {
          filesList.push(await file.text())
        }
        this.setFilesKeys(filesList)
        this.showImportKeys = true
      }
    },
  },
  computed: {
    ...mapGetters(useOpenPGPStore, ['myPublicKeys', 'myPrivateKeys', 'currentMyKey']),
    ...mapGetters(useCoreStore, ['userPublicId'])
  },
  methods: {
    ...mapActions(useOpenPGPStore, ['setCurrentMyKey', 'setMyPublicKeys', 'setMyPrivateKeys', 'setFilesKeys']),
    getFiles() {
      this.$refs.fileInput.$el.click()
    },
    clearFiles() {
      this.files = []
    },
    openKey(key) {
      this.setCurrentMyKey(key)
      this.$router.push(`/settings/open-pgp/my-keys/${key.id}`)
    },
    async check(pass) {
      if (pass !== null) {
        const isVerified = await verifyPrivateKeyPassword(
            this.currentMyKey,
            pass
        )
        if (isVerified) {
          this.$router.push(`/settings/open-pgp/my-keys/${this.currentMyKey.email}`)
        } else {
          notification.showError(this.$t('OPENPGPMOBILEWEBCLIENT.ERROR_INVALID_PASSWORD'))
        }
      }
    },
    openVerifyDialog(key) {
      this.setCurrentMyKey(key)
      askOpenPgpKeyPassword(this.userPublicId, this.$root._getParentComponent, this.check)
    },
  },
}
</script>

<style scoped>
.myKeys__list {
  flex-grow: 1;
}
</style>
