<!--
 This file is part of the Meeds project (https://meeds.io/).
 
 Copyright (C) 2020 - 2022 Meeds Association contact@meeds.io
 
 This program is free software; you can redistribute it and/or
 modify it under the terms of the GNU Lesser 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
 Lesser General Public License for more details.
 
 You should have received a copy of the GNU Lesser General Public License
 along with this program; if not, write to the Free Software Foundation,
 Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
-->
<template>
  <exo-drawer
    ref="drawer"
    v-model="drawer"
    right>
    <template #title>
      <h4>{{ $t('deeds.provisioning.management.emailSettings') }}</h4>
    </template>
    <template #content>
      <v-card
        :loading="loading"
        class="px-6 py-4"
        flat>
        <form ref="form" @submit="event.preventDefault(); return false;">
          <v-label for="emailSenderName">{{ $t('deeds.provisioning.management.emailSenderName') }}</v-label>
          <v-text-field
            id="emailSenderName"
            v-model="emailSenderName"
            :placeholder="$t('deeds.provisioning.management.emailSenderNamePlaceholder')"
            label=""
            class="border-box-sizing mt-2 mb-4 py-0"
            name="emailSenderName"
            type="text"
            autofocus="autofocus"
            aria-required="true"
            required="required"
            outlined
            dense
            @focus="$refs.form.reportValidity()"
            @blur="$refs.form.reportValidity()" />
          <v-label for="emailSenderEmail">{{ $t('deeds.provisioning.management.emailSenderEmail') }}</v-label>
          <v-text-field
            id="emailSenderEmail"
            v-model="emailSenderEmail"
            :placeholder="$t('deeds.provisioning.management.emailSenderEmailPlaceholder')"
            label=""
            class="border-box-sizing mt-2 mb-4 py-0"
            name="emailSenderEmail"
            type="email"
            aria-required="true"
            required="required"
            outlined
            dense
            @blur="$refs.form.reportValidity()" />
          <v-label for="emailAdditionalReceivers">{{ $t('deeds.provisioning.management.emailAdditionalReceivers') }}</v-label>
          <v-text-field
            id="emailAdditionalReceivers"
            v-model="emailAdditionalReceivers"
            :placeholder="$t('deeds.provisioning.management.emailAdditionalReceiversPlaceholder')"
            label=""
            class="border-box-sizing mt-2 mb-4 py-0"
            name="emailAdditionalReceivers"
            outlined
            dense
            @blur="$refs.form.reportValidity()" />
          <v-label>{{ $t('deeds.provisioning.management.emailSenderSignatureText') }}</v-label>
          <exo-activity-rich-editor
            v-if="drawer"
            v-model="emailSenderSignatureText"
            ref="emailSenderSignatureText"
            :placeholder="$t('deeds.provisioning.management.emailSenderSignatureTextPlaceholder')"
            max-length="200"
            ck-editor-type="emailSignature"
            class="flex mt-2 mb-4 py-0" />
          <v-label>{{ $t('deeds.provisioning.management.emailSenderSignatureLogo') }}</v-label>
          <deed-provisioning-management-settings-signature-logo
            ref="logoInput"
            v-model="logoUploadId"
            class="mt-2 mb-4 py-0" />
        </form>
      </v-card>
    </template>
    <template #footer>
      <div class="d-flex">
        <v-btn
          :disabled="sending"
          :min-width="minButtonsWidth"
          name="cancelEmailSettingsButton"
          class="btn ms-auto me-2"
          outlined
          text
          @click="close">
          <span class="text-capitalize">
            {{ $t('deeds.cancel') }}
          </span>
        </v-btn>
        <v-btn
          :disabled="!validForm"
          :loading="sending"
          :min-width="minButtonsWidth"
          name="saveEmailSettingsButton"
          class="primary"
          depressed
          dark
          @click="save">
          <span class="text-capitalize">
            {{ $t('deeds.save') }}
          </span>
        </v-btn>
      </div>
    </template>
  </exo-drawer>
</template>
<script>
export default {
  props: {
    settings: {
      type: Object,
      default: () => null,
    },
  },
  data: () => ({
    minButtonsWidth: 120,
    emailSenderName: null,
    emailSenderEmail: null,
    emailAdditionalReceivers: null,
    emailSenderSignatureText: null,
    logoUploadId: null,
    sending: false,
    drawer: false,
    loading: false,
  }),
  watch: {
    drawer() {
      this.reset();
      if (this.drawer) {
        this.refresh();
      }
    },
    sending() {
      if (this.sending) {
        this.$refs?.drawer?.startLoading();
      } else {
        this.$refs?.drawer?.endLoading();
      }
    },
  },
  computed: {
    validForm() {
      return this.emailSenderName?.length
          && this.emailSenderEmail?.length
          && this.emailSenderSignatureText?.length;
    },
  },
  methods: {
    open() {
      this.$refs.drawer.open();
      window.setTimeout(() => {
        this.$nextTick()
          .then(() => this.$refs.form?.reportValidity());
      }, 500);
    },
    close() {
      this.$refs.drawer.close();
    },
    reset() {
      this.emailSenderName = null;
      this.emailSenderEmail= null;
      this.emailAdditionalReceivers= null;
      this.emailSenderSignatureText = null;
      this.sending = false;
      this.$refs?.drawer?.endLoading();
    },
    refresh() {
      this.emailSenderName = this.settings?.emailSenderName;
      this.emailSenderEmail = this.settings?.emailSenderEmail;
      this.emailAdditionalReceivers = this.settings?.emailAdditionalReceivers;
      this.emailSenderSignatureText = this.settings?.emailSenderSignatureText;
    },
    save() {
      if (!this.$refs.form.reportValidity()) {
        return;
      }
      const settings = {
        emailSenderName: this.emailSenderName,
        emailSenderEmail: this.emailSenderEmail,
        emailAdditionalReceivers: this.emailAdditionalReceivers,
        emailSenderSignatureText: this.emailSenderSignatureText,
      };
      if (this.logoUploadId) {
        settings.logoUploadId = this.logoUploadId;
      }
      this.sending = true;
      return this.$tenantProvisioningSettingsService.saveSettings(settings)
        .then(() => {
          this.logoUploadId = null;
          this.$root.$emit('load-settings');
          this.close();
        })
        .catch(() => 
          document.dispatchEvent(new CustomEvent('notification-alert', {detail: {
            type: 'error',
            message: this.$t('deeds.provisioning.management.emailSettingsSaveError'),
          }}))
        )
        .finally(() => this.sending = false);
    },
  },
};
</script>