<template>
  <div class="contact-person-form">
    <h2>Kontaktperson Formular</h2>
    <form @submit.prevent="saveContactPerson">
      <label for="name">Name:</label>
      <input type="text" id="name" v-model="localContactPerson.name" required>

      <label for="phone">Telefon:</label>
      <input type="text" id="phone" v-model="localContactPerson.phone">

      <label for="street">Straße:</label>
      <input type="text" id="street" v-model="localContactPerson.street">

      <label for="zipcode">PLZ:</label>
      <input type="text" id="zipcode" v-model="localContactPerson.zipcode">

      <label for="city">Ort:</label>
      <input type="text" id="city" v-model="localContactPerson.city">

      <label for="email">Email:</label>
      <input type="email" id="email" v-model="localContactPerson.email">

      <label for="expiryDate">Ablaufdatum (optional):</label>
      <input type="date" id="expiryDate" v-model="localContactPerson.expiryDate">

      <label for="positions">Positionen:</label>
      <multiselect 
        v-model="selectedPositions"
        :options="positions"
        :multiple="true"
        :close-on-select="false"
        :clear-on-select="false"
        :preserve-search="true"
        placeholder="Wähle einige"
        label="caption"
        track-by="id"
        :preselect-first="false"
      ></multiselect>

      <button type="submit">Speichern</button>
      <button type="button" @click="resetForm">Neue Kontaktperson</button>
    </form>
  </div>
</template>

<script>
import Multiselect from 'vue-multiselect';
import axios from 'axios';

export default {
  name: 'ContactPersonForm',
  components: { Multiselect },
  props: {
    contactPerson: {
      type: Object,
      default: () => ({
        name: '',
        phone: '',
        street: '',
        zipcode: '',
        city: '',
        email: '',
        expiryDate: null,
        positions: []
      })
    },
    positions: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      localContactPerson: { ...this.contactPerson },
      selectedPositions: this.contactPerson.positions || []
    };
  },
  watch: {
    contactPerson: {
      handler(newVal) {
        this.localContactPerson = { ...newVal };
        this.selectedPositions = newVal.positions || [];
      },
      deep: true,
      immediate: true
    },
    selectedPositions(newVal) {
      this.localContactPerson.positions = newVal;
    }
  },
  methods: {
    async saveContactPerson() {
      try {
        const positionIds = this.selectedPositions.map(position => position.id);
        const payload = {
          ...this.localContactPerson,
          positionIds: positionIds
        };
        if (this.localContactPerson.id) {
          await axios.put(`/contact-persons/${this.localContactPerson.id}`, payload);
        } else {
          await axios.post('/contact-persons', payload);
        }

        this.$emit('contactPersonSaved');
      } catch (error) {
        console.error('Fehler beim Speichern der Kontaktperson:', error);
      }
    },
    resetForm() {
      this.localContactPerson = {
        name: '',
        phone: '',
        street: '',
        zipcode: '',
        city: '',
        email: '',
        expiryDate: null,
        positions: []
      };
      this.selectedPositions = [];
    }
  }
};
</script>

<style scoped>
@import 'vue-multiselect/dist/vue-multiselect.css';
.contact-person-form {
  max-width: 400px;
  margin: auto;
}
form {
  display: flex;
  flex-direction: column;
}
label {
  margin-top: 10px;
}
button {
  margin-top: 20px;
}
</style>
