<i18n>
{
  "en": {
    "SolutionsPermissionsForm": {
      "choosingPermissions": "Assign permissions",
      "filter": "Filter",
      "send": "Send",
      "permissions": "Permissions"
    }
  },
  "ru": {
    "SolutionsPermissionsForm": {
      "choosingPermissions": "Выбор разрешений",
      "filter": "Фильтр",
      "send": "Отправить",
      "permissions": "Разрешения"
    }
  }
}
</i18n>

<template>
  <q-form class="q-gutter-y-md" @submit="submit">
    <div v-if="readonly">
      <div class="row">
        <div class="col text-grey-5">
          {{ $t('SolutionsPermissionsForm.permissions') }}*
        </div>
        <div class="col text-grey-7">{{ permissionsFormatted.join(', ') }}</div>
      </div>
    </div>
    <div v-else class="q-gutter-y-md">
      <div class="text-h6">
        {{ $t('SolutionsPermissionsForm.choosingPermissions') }}
      </div>
      <q-input
        ref="filter"
        v-model="filter"
        filled
        :label="$t('SolutionsPermissionsForm.filter')"
      >
        <template #append>
          <q-icon
            v-if="filter !== ''"
            name="clear"
            class="cursor-pointer"
            @click="resetFilter"
          />
        </template>
      </q-input>
      <div class="row q-col-gutter-sm scroll-y" style="max-height: 50vh">
        <q-tree
          class="col-12 col-sm-6"
          :nodes="permissionsFormatted"
          :filter="filter"
          :filter-method="filterMethod"
          node-key="id"
          tick-strategy="leaf"
          :ticked.sync="ticked"
          default-expand-all
        />
      </div>
      <q-btn
        color="primary"
        :label="$t('SolutionsPermissionsForm.send')"
        type="submit"
      />
    </div>
  </q-form>
</template>

<script lang="ts">
// @ts-nocheck
export default {
  props: ['input-data', 'readonly'],
  data() {
    return {
      filter: '',
      permissionsFormatted: [],
      activeRolesIds: [],
      ticked: [],
      rolesList: [],
    };
  },
  computed: {
    outputData() {
      return {
        selectedPermissions: this.ticked.filter(
          (roleId) => !this.activeRolesIds.includes(roleId)
        ),
        deletedPermissions: this.activeRolesIds.filter(
          (roleId) => !this.ticked.includes(roleId)
        ),
        resourceScopeList: {
          ...this.inputData.role,
          permissions: this.ticked,
        },
      };
    },
  },
  watch: {
    inputData: {
      handler: function (val) {
        if (val.role && val.role.permissions) {
          this.ticked = val.role.permissions.map((item) => item.id);
          this.activeRolesIds = val.role.permissions.map((item) => item.id);
        }
        this.permissionsFormatted = val.resourceScopeList
          .filter((item) => item.permissions)
          .map(function changeList(item) {
            const returnObj = {
              id: item.id,
              label: item.name,
            };

            if (item.permissions) {
              returnObj.children = item.permissions.map(changeList);
            }
            return returnObj;
          });
      },
      immediate: true,
    },
  },
  methods: {
    filterMethod(node, filter) {
      const filt = filter.toLowerCase();

      return node.label && node.label.toLowerCase().indexOf(filt) > -1;
    },
    resetFilter() {
      this.filter = '';
      this.$refs.filter.focus();
    },
    submit(e) {
      this.$emit('submit', e, this.outputData);
    },
  },
};
</script>
