<template>
  <operation-dialog
    persistent
    sign
    ref="dialog"
    title="Ссылка для сброса пароля"
    v-model="opened"
    @hide="$emit('close')"
  >
    <q-spinner
      color="primary"
      size="50px"
      :thickness="2"
      v-if="loading"
    ></q-spinner>
    <div v-else>
      <div class="ResetPasswordModal__AttentionText">
        Ссылка активна 8 часов
      </div>
      <div class="ResetPasswordModal__Link">
        {{ resetPasswordLink }}
        <q-icon
          size="sm"
          name="pgs-copy"
          class="ResetPasswordModal__CopyIcon"
          @click="sendToClipBoard(resetPasswordLink)"
        />
      </div>
    </div>
    <q-dialog v-model="apiErrorShow" no-backdrop-dismiss>
      <process-api-error :errorObject="errorObject" />
    </q-dialog>
    <template #left-actions-panel>
      <r-btn
        outline
        label="Закрыть"
        icon="pgs-close"
        color="primary"
        @click="$emit('close')"
      />
    </template>
  </operation-dialog>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { SSOServiceApi } from '@openapi/sso';
import ProcessApiError from '@/recruits/components/dialogs/ProcessApiError.vue';
import { copyToClipboard } from 'quasar';

const SSOApi = new SSOServiceApi();

@Component({
  components: {
    ProcessApiError,
  },
})
export default class ResetPasswordModal extends Vue {
  @Prop({ default: '' }) personId: string;

  loading = false;
  opened = false;
  resetPasswordLink = '';
  apiErrorShow = false;
  errorObject = {};

  @Watch('personId')
  private async personIdHandler(): Promise<void> {
    // personId приходит пустая строка - значит надо закрыть окно
    this.opened = false;
    this.resetPasswordLink = '';
    this.apiErrorShow = false;
    this.errorObject = {};
    if (!this.personId) return;

    // personId приходит не пустым - значит надо загрузить инфу и показать окно
    if (this.personId) {
      this.loading = true;
      this.opened = true;
      try {
        const { data } = await SSOApi.resetMyPasswordV1(this.personId);
        this.resetPasswordLink = data.url;
        this.loading = false;
      } catch (error: any) {
        this.$emit('close');
        if (error.message !== 'Network Error') {
          if (error.response.status !== 400) {
            this.errorObject = {
              data: {
                message:
                  'Сервис временно недоступен, попробуйте повторить позже',
                description:
                  'Возникла ошибка сетевого соединения. Удаленный сервер недоступен. ' +
                  ' Проверьте сетевое соединение или обратитесь к системному администратору',
              },
            };
          } else {
            this.errorObject = error.response;
          }
        } else {
          this.errorObject = {
            data: {
              message: 'Сервис временно недоступен, попробуйте повторить позже',
              description:
                'Возникла ошибка сетевого соединения. Удаленный сервер недоступен. ' +
                ' Проверьте сетевое соединение или обратитесь к системному администратору',
            },
          };
        }
        this.apiErrorShow = true;
      }
    }
  }

  public sendToClipBoard(textValue: string): void {
    copyToClipboard(textValue);
    this.$q.notify({
      message: `'${textValue}' скопирован`,
    });
  }
}
</script>

<style lang="scss" scoped>
.ResetPasswordModal {
  &__AttentionText {
    color: red;
    font-weight: 500;
    margin-bottom: 12px;
    font-size: 16px;
  }

  &__Link {
    max-width: 100%;
    word-break: break-all;
    background: rgba(53, 126, 172, 0.05);
    overflow: hidden;
    font-family: Golos UI, sans-serif;
    border-radius: 4px;
    border: 1px solid rgba(1, 72, 116, 0.11);
    padding: 12px;
  }

  &__CopyIcon {
    padding-left: 2px;
    color: #1491cf;
    cursor: pointer;
  }
}
</style>
