<script setup>

import { ref, onMounted } from 'vue';
import { Button } from '@cloudron/pankow';
import AccessControl from '../AccessControl.vue';
import OperatorAccessControl from '../OperatorAccessControl.vue';
import AppsModel from '../../models/AppsModel.js';
import { ACL_OPTIONS } from '../../constants.js';
import UsersModel from '../../models/UsersModel.js';
import GroupsModel from '../../models/GroupsModel.js';

const props = defineProps([ 'app' ]);

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

const users = ref([]);
const groups = ref([]);

const loading = ref(false);
const submitBusy = ref(false);
const errorMessage = ref('');
const accessRestrictionOption = ref(ACL_OPTIONS.ANY);
const accessRestrictionAcl = ref({ users: [], groups: [] });
const operatorAcl = ref({ users: [], groups: [] });

async function onSubmit() {
  submitBusy.value = true;
  errorMessage.value = '';

  let [error] = await appsModel.configure(props.app.id, 'access_restriction', { accessRestriction: accessRestrictionOption.value === ACL_OPTIONS.ANY ? null : (accessRestrictionOption.value === ACL_OPTIONS.NOSSO ? false : accessRestrictionAcl.value) });
  if (error) {
    errorMessage.value = error.body ? error.body.message : 'Internal error';
    submitBusy.value = false;
    return console.error(error);
  }

  [error] = await appsModel.configure(props.app.id, 'operators', { operators: (operatorAcl.value.users.length || operatorAcl.value.groups.length) ? operatorAcl.value : null});
  if (error) {
    errorMessage.value = error.body ? error.body.message : 'Internal error';
    submitBusy.value = false;
    return console.error(error);
  }

  submitBusy.value = false;
}

onMounted(async () => {
  loading.value = true;

  let [error, result] = await usersModel.list();
  if (error) return console.error(error);
  const userIds = new Set();
  for (const u of result) {
    u.username = u.username || u.email; // ensure username
    userIds.add(u.id);
  }
  result.forEach(u => { u.label = u.username || u.email; });
  users.value = result;

  [error, result] = await groupsModel.list();
  if (error) return console.error(error);
  groups.value = result;
  const groupIds = new Set();
  for (const g of result) groupIds.add(g.id);

  if (props.app.accessRestriction === null) {
    accessRestrictionOption.value = ACL_OPTIONS.ANY;
    accessRestrictionAcl.value = { users: [], groups: [] };
  } else if (props.app.accessRestriction === false) {
    accessRestrictionOption.value = ACL_OPTIONS.NOSSO;
    accessRestrictionAcl.value = { users: [], groups: [] };
  } else {
    accessRestrictionOption.value = ACL_OPTIONS.RESTRICTED;
    accessRestrictionAcl.value = JSON.parse(JSON.stringify(props.app.accessRestriction)); // make a copy
    accessRestrictionAcl.value.users = accessRestrictionAcl.value.users.filter(uid => userIds.has(uid)); // remove deleted users
    accessRestrictionAcl.value.groups = accessRestrictionAcl.value.groups.filter(gid => groupIds.has(gid)); // remove deleted groups
  }

  operatorAcl.value = { users: [], groups: [] };
  if (props.app.operators) {
    operatorAcl.value = JSON.parse(JSON.stringify(props.app.operators)); // make a copy
    operatorAcl.value.users = operatorAcl.value.users.filter(uid => userIds.has(uid)); // remove deleted users
    operatorAcl.value.groups = operatorAcl.value.groups.filter(gid => groupIds.has(gid)); // remove deleted groups
  }

  loading.value = false;
});

</script>

<template>
  <div v-show="!loading">
    <div class="text-danger" v-if="errorMessage">{{ errorMessage }}</div>
    <AccessControl v-model:option="accessRestrictionOption" v-model:acl="accessRestrictionAcl" :users="users" :groups="groups" :manifest="app.manifest" :sso="app.sso" :installation="false"/>
    <div style="padding-top: 10px"></div>
    <OperatorAccessControl v-model:acl="operatorAcl" :users="users" :groups="groups" :has-ftp="app.manifest.addons?.localstorage?.ftp"/>
    <br/>
    <br/>
    <Button @click="onSubmit()" :loading="submitBusy" :disabled="submitBusy">{{ $t('main.dialog.save') }}</Button>
  </div>
</template>
