<i18n>
{
  "en": {
    "BasicCard": {
      "confirmation": "Confirmation",
      "delete": "Delete",
      "edit": "Edit",
      "no": "No",
      "questionToDelete": "Are you sure you want to delete the solution?",
      "tab": "Basic data",
      "title": "Solution card",
      "yes": "Yes"
    },
    "ClientsCard": {
      "tab": "Clients"
    },
    "RolesAndPermissions": {
      "tab": "Roles and permissions"
    }
  },
  "ru": {
    "BasicCard": {
      "confirmation": "Подтвердите",
      "delete": "Удалить",
      "edit": "Редактировать",
      "no": "Нет",
      "questionToDelete": "Вы действительно хотите удалить приложение?",
      "tab": "Основные данные",
      "title": "Карточка приложения",
      "yes": "Да"
    },
    "ClientsCard": {
      "tab": "Клиенты"
    },
    "RolesAndPermissions": {
      "tab": "Роли и разрешения"
    }
  }
}
</i18n>

<template>
  <div>
    <q-card class="bg-grey-custom no-shadow q-gutter-y-md q-mx-md q-mt-md">
      <div
        class="rounded-borders bg-white items-center justify-between row q-pa-md"
      >
        <div class="text-h6 flex items-center text-grey-9 col q-pr-md">
          <q-btn
            padding="xs"
            class="text-grey-7 q-mr-md"
            color="grey-3"
            icon="arrow_back"
            @click="backToSolutions"
          />
          <span class="text-h5">{{
            solutionName || $t('BasicCard.title')
          }}</span>
        </div>
        <div class="center row-md">
          <div class="justify-end flex">
            <q-btn
              color="white"
              text-color="primary"
              class="q-mr-md"
              outline
              :label="$t('BasicCard.delete')"
              type="button"
              :loading="loading"
              @click="dialogDelete = true"
            />
            <q-btn
              unelevated
              color="primary"
              :label="$t('BasicCard.edit')"
              type="button"
              :loading="loading"
              @click="editSolution"
            />
          </div>
        </div>
      </div>
    </q-card>

    <base-tabs v-if="!loading" :current-tab="tabs.current" :tabs="tabs.list" />

    <q-dialog v-model="dialogDelete">
      <q-card class="no-shadow">
        <q-card-section>
          <div class="text-h6">{{ $t('BasicCard.confirmation') }}</div>
        </q-card-section>

        <q-card-section class="q-pt-none">
          {{ $t('BasicCard.questionToDelete') }}
        </q-card-section>

        <q-card-actions align="right">
          <q-btn
            flat
            :label="$t('BasicCard.no')"
            color="primary"
            @click="dialogDelete = false"
          />
          <q-btn
            flat
            :label="$t('BasicCard.yes')"
            color="red"
            @click="deleteSolution"
          />
        </q-card-actions>
      </q-card>
    </q-dialog>
    <q-page-sticky
      class="lt-sm q-py-md"
      position="bottom-right"
      :offset="[16, 0]"
    >
      <div>
        <q-btn
          text-color="primary"
          class="q-mr-sm bg-white"
          outline
          icon="delete"
          round
          type="button"
          @click="dialogDelete = true"
        />
        <q-btn
          unelevated
          color="primary"
          icon="edit"
          round
          type="button"
          @click="editSolution"
        />
      </div>
    </q-page-sticky>
  </div>
</template>

<script lang="ts">
// @ts-nocheck
import { CardNeedToUpdateType } from '@constants/models/Card';
import { SolutionApi } from '@openapi/idm';

const solutionApi = new SolutionApi();

export default {
  props: ['common', 'model'],
  data() {
    return {
      loading: false,
      dialogDelete: false,
      name: '',
      tabs: {
        current: this.common.active,
        list: [
          {
            name: this.$t('BasicCard.tab'),
            path: 'basic',
            visible: true,
          },
          {
            name: this.$t('RolesAndPermissions.tab'),
            path: 'rolesAndPermissions',
            visible: true,
          },
          {
            name: this.$t('ClientsCard.tab'),
            path: 'clients',
            visible: true,
          },
        ],
      },
    };
  },
  computed: {
    solutionName() {
      return this.model?.name || '';
    },
  },
  watch: {
    'common.active': function (val) {
      this.tabs.current = val;
    },
    'common.needToUpdate': {
      handler(val) {
        this.$store.commit(
          `utils/cards/needToUpdate`,
          CardNeedToUpdateType.FALSE
        );
        this.init(val);
      },
      immediate: true,
    },
  },
  created() {
    this.init();
  },

  beforeDestroy() {
    this.$store.commit(`utils/cards/removeModel`, {
      path: this.common.path,
    });

    this.$store.commit(`utils/cards/removeUserTask`, {
      path: this.common.path,
    });
  },
  methods: {
    backToSolutions() {
      this.$router.push({
        path: '/solutions',
      });
    },
    deleteSolution() {
      this.loading = true;
      this.dialogDelete = false;

      this.$store.dispatch('wf/processes/dispatchProcess', {
        processKey: 'DeleteSolutionProcess',
        data: {
          appId: this.$route.params.id,
          redirectUrl: '/solutions',
        },
      });
    },
    editSolution() {
      this.loading = true;
      this.$store.dispatch('wf/processes/dispatchProcess', {
        processKey: 'EditSolutionIDMProcess',
        data: {
          solutionId: this.$route.params.id,
        },
      });
    },
    init(needToUpdateType = CardNeedToUpdateType.TRUE) {
      this.initModel();
      // global
      switch (needToUpdateType) {
        case CardNeedToUpdateType.TRUE: {
          this.initModel();
          break;
        }
        // optional
        case CardNeedToUpdateType.MODEL: {
          this.initModel();
          break;
        }
      }
    },
    initModel() {
      return new Promise((resolve, reject) => {
        try {
          solutionApi
            .getSolutionById(this.common.id, 'clients')
            .then(({ data: model }) => {
              this.$store.commit(`utils/cards/addModel`, {
                model,
                path: this.common.path,
              });
            })
            .catch(() => {
              throw new Error(
                '[components][cards][solutions][Index][getSolutionById]'
              );
            });
        } catch (e) {
          return reject(e);
        }
      });
    },
  },
};
</script>
