<i18n>
{
  "en": {
    "SolutionsSelectRoleForm": {
      "roles": "Roles",
      "confirmation": "Confirmation",
      "questionToDelete": "Are you sure you want to delete the role?",
      "yes": "Yes",
      "no": "No",
      "choose": "Choose",
      "delete": "Delete",
      "create": "Create",
      "saveAndComplete": "Save and complete",
      "title": "Title",
      "description": "Description",
      "assignedRoles": "Assigned roles"
    }
  },
  "ru": {
    "SolutionsSelectRoleForm": {
      "roles": "Роли",
      "confirmation": "Подтверждение",
      "questionToDelete": "Вы действительно хотите удалить роль?",
      "yes": "Да",
      "no": "Нет",
      "choose": "Выбрать",
      "delete": "Удалить",
      "create": "Создать",
      "saveAndComplete": "Сохранить и завершить",
      "title": "Название",
      "description": "Описание",
      "assignedRoles": "Назначенные роли"
    }
  }
}
</i18n>

<template>
  <q-form @submit="submit">
    <div v-if="readonly" class="row">
      <div class="col text-grey-5">
        {{ $t('SolutionsSelectRoleForm.assignedRoles') }}
      </div>
      <div class="col text-grey-7">{{ selectedRolesName }}</div>
    </div>
    <div v-else class="q-gutter-y-md">
      <q-table
        :title="$t('SolutionsSelectRoleForm.roles')"
        :data="roles"
        :columns="columns"
        row-key="id"
        selection="single"
        :selected.sync="selected"
        :grid="$q.screen.xs"
      >
        <template #item="props">
          <div class="col-12 q-px-md q-py-xs">
            <q-card
              class="q-table__grid-item col-12 overflow-auto"
              :class="{ 'bg-grey-2': !!props.selected }"
            >
              <q-card-section>
                <q-checkbox
                  v-model="props.selected"
                  dense
                  :label="props.row.name"
                />
              </q-card-section>
              <q-separator />
              <div class="q-table__grid-item-card">
                <div
                  v-for="col in props.cols"
                  :key="col.name"
                  class="q-table__grid-item-row"
                >
                  <div class="q-table__grid-item-title">
                    {{ col.label }}
                  </div>
                  <div class="q-table__grid-item-value">
                    {{ col.value }}
                  </div>
                </div>
              </div>
            </q-card>
          </div>
        </template>
      </q-table>
      <q-dialog v-model="dialogDelete">
        <q-card class="no-shadow">
          <q-card-section>
            <div class="text-h6">
              {{ $t('SolutionsSelectRoleForm.confirmation') }}
            </div>
          </q-card-section>

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

          <q-card-actions align="right">
            <q-btn
              flat
              :label="$t('SolutionsSelectRoleForm.no')"
              color="primary"
              @click="dialogDelete = false"
            />
            <q-btn
              flat
              :label="$t('SolutionsSelectRoleForm.yes')"
              color="red"
              @click="deleteRole"
            />
          </q-card-actions>
        </q-card>
      </q-dialog>
      <div v-if="this.selected.length">
        <q-btn
          flat
          color="primary"
          :label="$t('SolutionsSelectRoleForm.choose')"
          type="button"
          @click="chooseRole"
        />
        <q-btn
          flat
          color="red"
          :label="$t('SolutionsSelectRoleForm.delete')"
          type="button"
          @click="dialogDelete = true"
        />
      </div>
      <div class="row q-gutter-y-md">
        <q-btn
          color="grey-5"
          class="col-xs-12 col-sm-auto"
          :label="$t('SolutionsSelectRoleForm.create')"
          type="button"
          @click="createRole"
        />
        <q-btn
          class="col-xs-12 col-sm-auto q-ml-sm-md"
          color="primary"
          :label="$t('SolutionsSelectRoleForm.saveAndComplete')"
          type="button"
          @click="clickExit"
        />
      </div>
    </div>
  </q-form>
</template>

<script lang="ts">
// @ts-nocheck
import { v4 } from 'uuid';

export default {
  props: ['input-data', 'readonly'],
  data() {
    return {
      dialogDelete: false,
      roles: [],
      selected: [],
      selectedRolesName: '',
    };
  },
  computed: {
    columns() {
      return [
        {
          name: 'name',
          required: true,
          label: this.$t('SolutionsSelectRoleForm.title'),
          align: 'left',
          field: 'name',
          format: (val) => `${val}`,
          sortable: true,
        },
        {
          name: 'description',
          align: 'left',
          label: this.$t('SolutionsSelectRoleForm.description'),
          field: 'description',
          sortable: true,
        },
      ];
    },
    outputData() {
      return {
        selectedRole: this.selected,
        roleList: this.roles,
      };
    },
  },
  watch: {
    inputData: {
      handler: function (val) {
        this.selected = [];
        if (val) {
          this.roles = val.roleList || [];
          this.selectedRolesName = this.roles
            .map((itemRole) => itemRole.name)
            .join(', ');
        }
      },
      immediate: true,
    },
  },
  methods: {
    submit(e) {
      this.$emit('submit', e, this.outputData);
    },
    createRole(e) {
      this.$emit('submit', e, {
        transCreate: true,
        transDelete: false,
        transEdit: false,
        transExit: false,
        role: {
          id: v4(),
        },
      });
    },
    deleteRole(e) {
      this.dialogDelete = false;
      const role = this.selected[0] || null;

      this.$emit('submit', e, {
        transCreate: false,
        transEdit: false,
        transDelete: true,
        transExit: false,
        ...this.outputData,
        role,
      });
    },
    chooseRole(e) {
      const role = this.selected[0] || null;

      this.$emit('submit', e, {
        transCreate: false,
        transEdit: true,
        transDelete: false,
        transExit: false,
        ...this.outputData,
        role,
      });
    },
    clickExit(e) {
      this.$emit('submit', e, {
        transCreate: false,
        transDelete: false,
        transEdit: false,
        transExit: true,
        ...this.outputData,
      });
    },
    searchRole(e) {
      const solution = this.selected[0] || null;

      this.$emit('submit', e, {
        transCreate: false,
        transExit: false,
        ...this.outputData,
        solution,
      });
    },
  },
};
</script>
