<template>
    <div>
      <div v-if="isOpen" class="dialog-overlay">
        <div class="dialog-content">
          <h3>Institution hinzufügen</h3>
          <div>
            <label for="institution-select">Wählen Sie eine Institution:</label>
            <multiselect id="institution-select" v-model="selectedInstitution" :options="institutionOptions" :multiple="false" label="name" track-by="id" @select="onInstitutionSelect" />
          </div>
          <div>
            <label>Wählen Sie welche Elemente angezeigt werden sollen:</label>
            <div class="display-options">
              <label><input type="checkbox" v-model="displayOptions.street" /> Straße</label>
              <label><input type="checkbox" v-model="displayOptions.zipcode" /> Postleitzahl</label>
              <label><input type="checkbox" v-model="displayOptions.city" /> Stadt</label>
              <label><input type="checkbox" v-model="displayOptions.phone" /> Telefon</label>
              <label><input type="checkbox" v-model="displayOptions.fax" /> Fax</label>
              <label><input type="checkbox" v-model="displayOptions.email" /> E-Mail</label>
            </div>
            <div>
              <label for="displayStyle">Anzeigen als</label>
              <select id="displayStyle" v-model="displayStyle">
                <option v-for="style in displayStyles" :value="style.id" :key="style.id">{{ style.label }}</option>
              </select>
            </div>
          </div>
          <div>
            <button @click="confirmAddInstitutionConfiguration">Bestätigen</button>
            <button @click="closeAddInstitutionDialog">Schließen</button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  import axios from '@/axios';
  import Multiselect from 'vue-multiselect';
  
  export default {
    name: 'AddInstitutionDialog',
    components: {
      Multiselect,
    },
    emits: ['confirm'],
    setup(props, { emit }) {
      const isOpen = ref(false);
      const institutions = ref([]);
      const selectedInstitution = ref(null);
      const displayStyle = ref('float');
  
      const displayOptions = ref({
        street: false,
        zipcode: false,
        city: false,
        phone: false,
        fax: false,
        email: false,
      });
  
      const institutionOptions = ref([
        { id: 'all', name: 'Alle' },
        ...institutions.value,
      ]);
  
      const displayStyles = ref([
        { id: 'float', label: 'Durchlaufender Text' },
        { id: 'box', label: 'Textbox' },
      ]);
  
      const openAddInstitutionDialog = () => {
        isOpen.value = true;
        fetchInstitutions();
      };
  
      const closeAddInstitutionDialog = () => {
        isOpen.value = false;
      };
  
      const onInstitutionSelect = () => {
        if (selectedInstitution.value && selectedInstitution.value.id === 'all') {
          institutionOptions.value = [{ id: 'all', name: 'Alle' }];
          selectedInstitution.value = { id: 'all', name: 'Alle' };
        }
      };
  
      const confirmAddInstitutionConfiguration = () => {
        const displayArray = Object.keys(displayOptions.value).filter((key) => displayOptions.value[key]);
        const institutionConfig = {
          id: selectedInstitution.value.id,
          display: displayArray,
          style: displayStyle.value
        };
        const configString = `{{ institution:${JSON.stringify(institutionConfig)} }}`;
        emit('confirm', configString);
        closeAddInstitutionDialog();
      };
  
      const fetchInstitutions = async () => {
        try {
          const response = await axios.get('/institutions');
          institutions.value = response.data;
          institutionOptions.value = [{ id: 'all', name: 'Alle' }, ...institutions.value];
        } catch (error) {
          console.error('Fehler beim Laden der Institutionen:', error);
        }
      };
  
      return {
        isOpen,
        institutions,
        selectedInstitution,
        displayOptions,
        displayStyle,
        displayStyles,
        institutionOptions,
        openAddInstitutionDialog,
        closeAddInstitutionDialog,
        confirmAddInstitutionConfiguration,
        onInstitutionSelect,
      };
    },
  };
  </script>
  
  <style scoped>
  .dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .dialog-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
  }
  
  .multiselect {
    width: 100%;
  }
  
  .display-options label {
    display: block;
  }
  </style>
  