<script setup lang="ts">
import { ref } from 'vue';
import MockedMessageToastComponent from './MockedMessageToastComponent.vue';


const props = defineProps(
    {
    messageData : {type: Object, required:true}
    }
)


const message = ref('');
const visible = ref('hidden');
const fetchLink = window.location.protocol + "//" + window.location.hostname + "/mock/api/mock";

function prepareAndSendData(){
<<<<<<< HEAD
    if (props.messageData != null|| props.messageData != undefined ){
=======
    if (props.messageData != null || props.messageData != undefined ){
>>>>>>> 307e732608fca31b60027b417412691ff0e1c2f0
        fetch(fetchLink, { method: "put", body:JSON.stringify(props.messageData), headers: { "Content-Type" : "application/json" }})
        .then( response => response.text() )
        .then( data =>  {message.value = data} )
        .catch(exception => {message.value = exception})

        showToast();
    }
}

function showToast(){
    visible.value = "visible";
    setTimeout( () => { visible.value = "opacity-0" } , 1000 )
}

function hideToast(){
    visible.value = "hidden";
}


</script>

<template>
    <button @click="prepareAndSendData()" class="tool-button w-full md:w-32">Save</button>

    <div class="fixed bottom-5 right-12">
        <MockedMessageToastComponent @closed:toast_closed="hideToast()" v-bind:visible="visible" v-bind:message="message"/>
    </div>
</template>