<!--

  Copyright (C) 2025 eXo Platform SAS

  This program is free software: you can redistribute it and/or modify
  it under the terms of the GNU Affero General Public License as published by
  the Free Software Foundation, either version 3 of the License, or
  (at your option) any later version.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

  You should have received a copy of the GNU Affero General Public License
  along with this program.  If not, see <gnu.org/licenses>.

-->
<template>
  <v-dialog
    ref="dialog"
    v-model="dialog"
    :loading="loading"
    content-class="uiPopup"
    max-width="100vw"
    width="420"
    persistent>
    <v-card v-if="dialog" class="elevation-12 transparent">
      <div class="ignore-vuetify-classes popupHeader transparent ClearFix">
        <v-btn
          class="pull-right"
          icon
          small
          @click="close">
          <v-icon size="16">fa-times</v-icon>
        </v-btn>
        <span class="ignore-vuetify-classes text-title">
          {{ $t('documents.label.openInDesktop.dialog.title') }}
        </span>
      </div>
      <v-card-text>
        <template v-if="password">
          <div>
            {{ $t('documents.label.openInDesktop.dialog.description') }}
          </div>
          <documents-credential-inputs
            :password="password" />
        </template>
        <div v-else-if="hasApiKey" v-sanitized-html="existingKeyDescription"></div>
        <documents-confirm-access-input
          v-else
          ref="confirmAccessInput"
          @loading="loading = $event"
          @validated="password = $event" />
      </v-card-text>
      <v-card-actions v-if="hasApiKey">
        <v-spacer />
        <v-btn
          :loading="computing"
          :diabled="!href"
          :href="href"
          class="btn btn-primary me-2"
          @click="openFile">
          {{ $t('documents.label.openInDesktop.dialog.openFile') }}
        </v-btn>
        <v-btn
          v-if="password"
          class="btn ms-2"
          @click="close">
          {{ $t('documents.label.openInDesktop.dialog.cancel') }}
        </v-btn>
        <v-btn
          v-else
          color="primary"
          elevation="0"
          class="ms-2"
          outlined
          @click="regenerateAccess">
          {{ $t('UserSettings.documents.webdav.regenerateAccess') }}
        </v-btn>
        <v-spacer />
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>
<script>
export default {
  data: () => ({
    dialog: false,
    loading: false,
    computing: false,
    protocol: null,
    relativePath: null,
    password: null,
    hasApiKey: false,
  }),
  computed: {
    href() {
      return this.relativePath && this.protocol ? `${this.protocol}${window.origin}/webdav/drives${this.relativePath}` : null;
    },
    apiKeyRegenerate() {
      return !this.password && !this.hasApiKey;
    },
    existingKeyDescription() {
      return this.$t('documents.label.openInDesktop.dialog.descriptionNoCredentials').replaceAll('\\n', '<br>');
    },
  },
  watch: {
    dialog() {
      if (this.dialog) {
        document.dispatchEvent(new CustomEvent('modalOpened'));
      } else {
        document.dispatchEvent(new CustomEvent('modalClosed'));
      }
      this.$emit('input', this.dialog);
      this.password = null;
    },
    password() {
      if (this.password && !this.hasApiKey) {
        this.hasApiKey = true;
      }
    },
    hasApiKey() {
      if (this.password && !this.hasApiKey) {
        this.password = null;
      }
    },
    async apiKeyRegenerate() {
      await this.$nextTick();
      if (this.$refs.confirmAccessInput) {
        this.$refs.confirmAccessInput.init();
      }
    },
  },
  async created() {
    this.$root.$on('open-in-desktop-dialog', this.open);
    this.hasApiKey = await this.$apiKeyService.hasPassword();
  },
  beforeDestroy() {
    this.$root.$off('open-in-desktop-dialog', this.open);
  },
  methods: {
    async open(protocol, path) {
      this.protocol = protocol;
      this.relativePath = null;
      this.dialog = true;
      await this.$nextTick();
      if (this.$refs.confirmAccessInput) {
        this.$refs.confirmAccessInput.init();
      }
      await this.computePath(path);
    },
    regenerateAccess() {
      this.hasApiKey = false;
    },
    async computePath(path) {
      this.computing = true;
      try {
        const response = await fetch(`${eXo.env.portal.context}/${eXo.env.portal.rest}/v1/documents/webdav-path?jcrPath=${encodeURIComponent(path)}`, {
          credentials: 'include',
        });
        if (!response.ok) {
          throw new Error(await response.text());
        }
        this.relativePath = await response.text();
      } finally {
        this.computing = false;
      }
    },
    close() {
      this.dialog = false;
    },
  },
};
</script>