<template>
  <div class="RecordHeader">
    <div class="RecordHeader__Header">
      <div>
        <q-btn
          class="RecordHeader__ButtonBack"
          dense
          icon="pgs-arrow-left"
          size="sm"
          @click="goBackOrToParentView(defaultRoute)"
        />
      </div>
      <div class="RecordHeader__Details">
        <div class="RecordHeader__Source">Сотрудник</div>
        <q-icon
          v-if="!enabled"
          name="block"
          color="text-grey-7"
          size="24px"
          title="Отключен"
        />
        <q-icon
          v-if="isBlockedCredential"
          name="lock"
          color="text-grey-7"
          size="24px"
          title="Заблокирован"
        />
      </div>
      <div class="RecordHeader__Space" />
      <r-btn
        v-if="showUnblockBtn"
        class="RecordHeader__Btn"
        action
        :loading="loading"
        label="Разблокировать"
        @click="dialogUnblocked = true"
      >
        <template v-slot:loading>
          <upload-status
            class="RecordHeader__Loader"
            status="pending"
            :inline="true"
            :label-size="12"
            :size="24"
            :line-width="2"
          />
        </template>
      </r-btn>
      <r-btn
        v-if="showRecoverPassBtn"
        class="RecordHeader__Btn"
        action
        label="Сбросить пароль"
        @click="openDialogRecoverPassword"
      />
      <r-btn
        v-if="$AC.haveScope($AC.scopes.SECURITY_ADMINISTRATOR)"
        class="RecordHeader__Btn"
        action
        :loading="loading"
        label="Удалить"
        @click="deletingAccount = data"
      >
        <template v-slot:loading>
          <upload-status
            class="RecordHeader__Loader"
            status="pending"
            :inline="true"
            :label-size="12"
            :size="24"
            :line-width="2"
          />
        </template>
      </r-btn>
    </div>
    <p class="RecordHeader__Title">
      {{ accountFIO }}
    </p>
    <operation-dialog
      persistent
      sign
      ref="dialog"
      :title="accountFIO"
      sub="Подтверждение действия"
      v-model="dialogUnblocked"
      @hide="dialogUnblocked = false"
    >
      <q-spinner
        color="primary"
        size="50px"
        :thickness="2"
        v-if="loading"
      ></q-spinner>
      <div v-else>Вы действительно хотите разблокировать сотрудника?</div>

      <template #left-actions-panel>
        <r-btn
          outline
          label="Отмена"
          positive
          @click="dialogUnblocked = false"
        />
      </template>
      <template #right-actions-panel>
        <r-btn outline label="Подтверждение" negative @click="unblockAccount" />
      </template>
    </operation-dialog>
    <operation-dialog
      persistent
      sign
      ref="dialog"
      :title="accountFIO"
      sub="Ссылка для сброса пароля"
      v-model="dialogRecoverPassword"
      @hide="dialogRecoverPassword = false"
    >
      <q-spinner
        color="primary"
        size="50px"
        :thickness="2"
        v-if="loading"
      ></q-spinner>
      <div v-else>
        <div class="RecordHeader__AttentionText">Активна 8 часов</div>
        <div class="RecordHeader__RecoverLink">
          <span>
            {{ recoverPasswordLink }}
          </span>
          <q-icon
            size="sm"
            name="pgs-copy"
            class="RecordHeader__CopyBtn"
            @click="sendToClipBoard(recoverPasswordLink)"
          />
        </div>
      </div>

      <template #left-actions-panel>
        <r-btn
          outline
          label="Закрыть"
          positive
          @click="dialogRecoverPassword = false"
        />
      </template>
    </operation-dialog>
    <q-dialog v-model="apiErrorShow" no-backdrop-dismiss>
      <process-api-error :errorObject="errorObject" />
    </q-dialog>
    <DeleteModal
      :account="deletingAccount"
      @close="deletingAccount = null"
      @finish="goBackOrToParentView(defaultRoute)"
    />
  </div>
</template>

<script lang="ts">
import { Component, Mixins, Prop } from 'vue-property-decorator';
import ReturnToParentView from '@mixins/ReturnToParentView';
import ProcessStarter from '@/mixins/ProcessStarter';
import UploadStatus from '@/components/common/upload-status/index.vue';
import get from 'lodash/get';
import { CredentialsApi } from '@openapi/idm';
import { SSOServiceApi } from '@openapi/sso';
import { copyToClipboard } from 'quasar';
import { Account } from '@interfaces/entities/Account';
import DeleteModal from './DeleteModal.vue';

const credentialsApi = new CredentialsApi();
const SSOApi = new SSOServiceApi();

@Component({
  components: { UploadStatus, DeleteModal },
})
export default class RecordHeader extends Mixins(
  ReturnToParentView,
  ProcessStarter
) {
  @Prop({ default: () => ({}) }) data: Account | null;

  private get accountFIO(): string {
    return this.data?.person?.fio || 'Карточка сотрудника';
  }

  get enabled(): boolean {
    return get(this.data, 'enabled', false);
  }

  // computed свойство проверки есть ли хоть один локальный акканут
  private get isLocalCredential(): boolean {
    const credentials = this.data?.credentials?.filter(
      (credential) => credential.schema === 'LocalCredential'
    );
    return !!credentials?.length;
  }

  // computed свойство нужно ли показывать кнопку для разблокировки аккаунта
  get showUnblockBtn(): boolean {
    return (
      this.$AC.haveScope(this.$AC.scopes.SECURITY_ADMINISTRATOR) &&
      this.isBlockedCredential
    );
  }

  // computed свойство нужно ли показывать кнопку для сброса пароля
  get showRecoverPassBtn(): boolean {
    return (
      this.$AC.haveOneOfScope([
        this.$AC.scopes.CLOUD_ADMIN,
        this.$AC.scopes.SECURITY_ADMINISTRATOR,
      ]) && this.isLocalCredential
    );
  }

  // computed свойство проверки есть ли хоть один заблоикрованный акканут
  get isBlockedCredential(): boolean {
    const credentials = this.data?.credentials?.filter((credential) => {
      return credential.schema === 'LocalCredential' && credential.blocked;
    });
    return !!credentials?.length;
  }

  private loading = false;
  private defaultRoute = '/admin/users/accounts';

  apiErrorShow = false;
  errorObject = {};

  // Удаление аккаунта
  private deletingAccount = null;

  // разблокировка пользователя
  private dialogUnblocked = false;
  async unblockAccount(): Promise<void> {
    this.loading = true;
    const request: Promise<unknown>[] = [];
    this.data?.credentials.forEach((credential) => {
      if (credential.blocked) {
        request.push(credentialsApi.unblockLocalCredential(credential.id));
      }
    });
    Promise.all(request)
      .then(() => {
        this.$emit('reloadRecord');
      })
      .catch((error) => {
        this.errorObject = {
          data: {
            message: 'Произошла ошибка при снятии блокировок',
            description: error,
          },
        };
        this.apiErrorShow = true;
      })
      .finally(() => {
        this.loading = false;
      });
  }

  // Сброс пароля
  dialogRecoverPassword = false;
  recoverPasswordLink = '';

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

  async openDialogRecoverPassword(): Promise<void> {
    if (!this.data?.person?.id) {
      this.errorObject = {
        data: {
          message: 'Сервис временно недоступен, попробуйте повторить позже',
          description: 'Не найден айди пользователя',
        },
      };
      this.apiErrorShow = true;
      return;
    }
    this.dialogRecoverPassword = true;
    this.loading = true;
    try {
      const { data } = await SSOApi.passwordResetV1(this.data.person.id);
      this.recoverPasswordLink = data.url;
      this.loading = false;
    } catch (error) {
      this.loading = false;
      this.dialogRecoverPassword = false;
      this.recoverPasswordLink = '';
      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;
    }
  }
}
</script>

<style lang="scss" scoped>
.RecordHeader {
  background-color: rgb(237, 243, 247);
  display: flex;
  flex-flow: column;
  &__Title {
    font-family: 'Golos Text', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -0.02em;
    color: rgba(2, 12, 18, 0.9);
    margin-top: 6px;
    margin-bottom: 8px;
    padding: 4px 16px;
  }
  &__ButtonBack {
    border: 1px solid rgba(1, 72, 116, 0.18) !important;
    border-radius: 24px !important;
    color: #1491cf !important;
    padding-left: 4px;
    padding-right: 4px;
    margin-right: 4px;
  }
  &__Details {
    gap: 8px;
    display: flex;
    flex-wrap: wrap;

    > div {
      overflow-x: hidden;
      font-family: 'Golos Text', sans-serif;
      font-style: normal;
      font-weight: 600;
      font-size: 12px;
      line-height: 16px;
      flex: 0 1 auto;

      &.RecordHeader__Source {
        display: inline-flex;
        text-align: center;
        padding-left: 4px;
        font-family: 'Golos Text', sans-serif;
        font-style: normal;
        font-weight: 600;
        font-size: 12px;
        line-height: 26px;
        color: rgba(2, 12, 18, 0.58);
      }
    }
  }
  &__Space {
    flex-grow: 1;
  }
  &__Loader {
    background-color: inherit;
  }
  &__Header {
    padding: 16px 16px 0 16px;
    display: flex;
    flex-wrap: wrap;
  }
  &__Btn {
    margin-left: 8px;
  }
  &__AttentionText {
    color: red;
    font-weight: 500;
  }
  &__RecoverLink {
    max-width: 100%;
    word-break: break-all;
  }
  &__CopyBtn {
    padding-left: 2px;
    color: #1491cf;
  }
}
</style>
