<script setup>

import { ref, useTemplateRef } from 'vue';
import { Dialog, TextInput, FormGroup, MultiSelect } from 'pankow';
import UsersModel from '../models/UsersModel.js';
import GroupsModel from '../models/GroupsModel.js';
import AppsModel from '../models/AppsModel.js';

const usersModel = UsersModel.create();
const groupsModel = GroupsModel.create();
const appsModel = AppsModel.create();

const emit = defineEmits([ 'success' ]);

const dialog = useTemplateRef('dialog');

// also determines if new or edit mode
const group = ref(null);
const busy = ref(false);
const formError = ref('');
const name = ref('');
const users = ref([]);
const allUsers = ref([]);
const apps = ref([]);
const allApps = ref([]);

async function onSubmit() {
  busy.value = true;
  formError.value = '';

  if (group.value) {
    const [error] = await groupsModel.update(group.value.id, name.value, users.value.map(u => u.id), apps.value.map(u => u.id));
    if (error) {
      formError.value = error.body ? error.body.message : 'Internal error';
      busy.value = false;
      return console.error(error);
    }
  } else {
    const [error] = await groupsModel.add(name.value, users.value.map(u => u.id), apps.value.map(u => u.id));
    if (error) {
      formError.value = error.body ? error.body.message : 'Internal error';
      busy.value = false;
      return console.error(error);
    }
  }

  emit('success');
  dialog.value.close();
  busy.value = false;
}

defineExpose({
  async open(g = null) {
    group.value = g;
    name.value = g ? g.name : '';

    let [error, result] = await usersModel.list();
    if (error) return console.error(error);
    result.forEach(u => u.label = (u.username || u.email));
    allUsers.value = result;
    users.value = g ? g.userIds.map(id => { return result.find(u => u.id === id); }) : [];

    [error, result] = await appsModel.list();
    if (error) return console.error(error);
    result.forEach(a => a.label = (a.label || a.fqdn));
    allApps.value = result;
    apps.value = g ? g.appIds.map(id => { return result.find(a => a.id === id); }) : [];

    dialog.value.open();
  }
});

</script>

<template>
  <Dialog ref="dialog"
    :title="group ? $t('users.editGroupDialog.title', { name: group.name }) : $t('users.addGroupDialog.title')"
    :confirm-label="group ? $t('main.dialog.save') : $t('users.group.addGroupAction')"
    :confirm-busy="busy"
    :confirm-active="!busy"
     reject-style="secondary"
    :reject-label="busy ? null : $t('main.dialog.cancel')"
    @confirm="onSubmit()"
  >
    <p class="text-warning" v-if="group?.source">{{ $t('users.editGroupDialog.externalLdapWarning') }}</p>
    <form @submit.prevent="onSubmit()" autocomplete="off">
      <fieldset :disabled="busy">
        <input type="submit" style="display: none;" />

        <FormGroup>
          <label for="nameInput">{{ $t('users.group.name') }}</label>
          <TextInput id="nameInput" v-model="name" />
        </FormGroup>

        <FormGroup>
          <label for="usersInput">{{ $t('users.group.users') }}</label>
          <div v-if="group?.source"><span ng-repeat="user in groupEdit.selectedUsers"> {{ (user.username || user.email) }}</span></div>
          <MultiSelect v-else v-model="users" :options="allUsers" />
        </FormGroup>

        <FormGroup>
          <label for="appsInput">Access to Apps</label>
          <MultiSelect v-model="apps" :options="allApps" />
        </FormGroup>
      </fieldset>
    </form>
  </Dialog>
</template>
