<script setup>

import { ref, useTemplateRef } from 'vue';
import { Dialog, TextInput, FormGroup, Checkbox, InputGroup, SingleSelect } from 'pankow';
import MailinglistsModel from '../models/MailinglistsModel.js';

const emit = defineEmits([ 'success' ]);
const props = defineProps([ 'domains' ]);

const mailinglistsModel = MailinglistsModel.create();

const dialog = useTemplateRef('dialog');
const busy = ref(false);
const formError = ref('');
const name = ref('');
const domain = ref('');
const mailinglist = ref(null);
const membersText = ref('');
const membersOnly = ref(false);
const active = ref(false);

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

  const data = {
    members: membersText.value.split('\n').map(m => m.trim()).filter(m => m),
    membersOnly: membersOnly.value,
    active: active.value,
  };

  if (mailinglist.value) {
    const [error] = await mailinglistsModel.update(domain.value, name.value, data);
    if (error) {
      busy.value = false;
      formError.value = error.body ? error.body.message : 'Internal error';
      return console.error(error);
    }
  } else {
    const [error] = await mailinglistsModel.add(domain.value, name.value, data);
    if (error) {
      busy.value = false;
      formError.value = error.body ? error.body.message : 'Internal error';
      return console.error(error);
    }
  }

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

defineExpose({
  async open(m = null) {
    busy.value = false;
    formError.value = '';
    mailinglist.value = m;

    name.value = m ? m.name : '';
    domain.value = m ? m.domain : '';
    membersText.value = m ? m.members.join('\n') : '';
    membersOnly.value = m ? m.membersOnly : false;

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

</script>

<template>
  <Dialog ref="dialog"
    :title="mailinglist ? $t('email.editMailboxDialog.title', { name: mailinglist.name, domain: mailinglist.domain }) : $t('email.addMailboxDialog.title')"
    :confirm-label="$t(mailinglist ? 'main.dialog.save' : 'email.incoming.mailboxes.addAction')"
    :confirm-busy="busy"
    :confirm-active="!busy && name !== '' && domain !== '' && membersText !== ''"
     reject-style="secondary"
    :reject-label="busy ? null : $t('main.dialog.cancel')"
    @confirm="onSubmit()"
  >
    <div>
      <div class="has-error" v-if="formError">{{ formError }}</div>

      <form @submit.prevent="onSubmit()" novalidate autocomplete="off">
         <fieldset :disabled="busy">
          <input type="submit" style="display: none;" :disabled="!name || !domain"/>

          <FormGroup v-if="!mailinglist">
            <label for="nameInput">{{ $t('email.addMailinglistDialog.name') }}</label>
            <InputGroup>
              <TextInput id="nameInput" style="flex-grow: 1;" v-model="name"/>
              <SingleSelect v-model="domain" :options="domains" option-key="domain" option-label="domain" />
            </InputGroup>
          </FormGroup>

          <FormGroup>
            <label for="membersInput">{{ $t('email.addMailinglistDialog.members') }}</label>
            <textarea id="membersInput" v-model="membersText" rows="5"></textarea>
          </FormGroup>

          <Checkbox v-model="membersOnly" :label="$t('email.addMailinglistDialog.membersOnlyCheckbox')"/><br/>
          <Checkbox v-model="active" :label="$t('email.updateMailinglistDialog.activeCheckbox')"/><br/>
        </fieldset>
      </form>
    </div>
  </Dialog>
</template>