<script setup>
import {ref, defineProps, watch} 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 OtherVaskeabonnementValue = 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.OtherVaskeabonnement) {
        OtherVaskeabonnementValue.value = userKeys.value.OtherVaskeabonnement;
      }
    } 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('OtherVaskeabonnement', OtherVaskeabonnementValue.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>');
}

watch(() => props.user_id, () => {
  getKeys();
});
</script>

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

<style scoped>

</style>