<script setup>
import { ref, defineProps } from 'vue';
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import Swal from "sweetalert2";

const props = defineProps({
  user_id: Number,
  readOnly: {
    type: Boolean,
    default: false
  },
  textOnly: {
    type: Boolean,
    default: false
  }
});

const OtherSpecialArrangementValue = ref(null);

const userKeys = ref([{
  key: '',
  value: ''
}]);

const getKeys = async () => {
  // Get the special arrangement
  await SessionUser.request('/superuser/user/keys?user_id=' + props.user_id, 'GET').then((response) => {
    userKeys.value = response.data.data;
    console.log(userKeys.value);
    // Check if the key exists
    try {
      if (userKeys.value.OtherSpecialArrangement) {
        OtherSpecialArrangementValue.value = userKeys.value.OtherSpecialArrangement;
      }
    } catch (e) {
      console.log('Key does not exist');
    }
  }).catch((error) => {
    Swal.fire({
      title: 'Fejl',
      html: '<p>Der skete en fejl ved hentning af dataen. <br>Prøv igen, eller kontakt support.</p>',
      icon: 'error',
      confirmButtonText: 'OK'
    });
  });
};

const setKey = async (key, value) => {
  // Set the key
  await SessionUser.request('/superuser/user/keys', 'POST', {
    user_id: props.user_id,
    key: key,
    value: value
  }).then((response) => {
    console.log(response);
    getKeys();
  });
};

getKeys();
const saveForm = async () => {
  if (props.readOnly) {
    return;
  }
  // Save the form
  console.log('Save the form');
  await setKey('OtherSpecialArrangement', OtherSpecialArrangementValue.value ?? '').then((response) => {
    console.log(response);
  }).catch((error) => {
    // Show the error with a sweetalert
    Swal.fire({
      title: 'Fejl',
      html: '<p>Der skete en fejl ved gemningen af dataen. <br>Prøv igen, eller kontakt support.</p>',
      icon: 'error',
      confirmButtonText: 'OK'
    });
  });
}

const parseLineBreaks = (text) => {
  return text.replace(/\n/g, '<br>');
}
</script>

<template>
  <form class="form" @submit.prevent="saveForm" v-if="!props.readOnly && !props.textOnly">
    <div class="field">
      <label class="label is-size-3">Special aftale, internt. ( Nota )</label>
      <div class="control">
        <textarea class="textarea" v-model="OtherSpecialArrangementValue" placeholder="Udfyld beskrivelse, hvis der er en intern aftale"></textarea>
      </div>
    </div>
    <div class="field" v-if="!props.readOnly">
      <div class="control">
        <button class="button is-dark is-fullwidth" type="submit">Gem special aftale</button>
      </div>
    </div>
  </form>
  <div v-else-if="props.readOnly && !props.textOnly">
    <div class="message is-info" v-if="OtherSpecialArrangementValue">
      <div class="message-body">
        <span><strong>Special aftale, internt. ( Nota )</strong><br></span>
        <span v-if="OtherSpecialArrangementValue" v-html="parseLineBreaks(OtherSpecialArrangementValue)"></span>
      </div>
    </div>
  </div>
  <template v-else-if="props.readOnly">
    <div class="column">
      <!-- Special Arrangement -->
      <div class="message is-warning" v-if="OtherSpecialArrangementValue">
        <div class="message-header">
          <p>Special aftale</p>
        </div>
        <div
            class="message-body"
        >
          <p v-if="OtherSpecialArrangementValue" v-html="parseLineBreaks(OtherSpecialArrangementValue)"></p>
        </div>
      </div>
    </div>
  </template>
</template>

<style scoped>

</style>