<script setup lang="ts">
import {ref, type Ref} from 'vue';
import HeadersComponent from './HeadersComponent.vue';
import SaveComponent from './SaveComponent.vue';
import CodeEditorComponent from '../CodeEditorComponent.vue';

const clientUUID = ref('');
const host = window.location.protocol + "//" + window.location.hostname + "/mock";
const mockMessageLink = ref("www.google.com");

interface mockedMessageData {
  clientUUID: string;
  contentType: string;
  messageBody: string;
  httpHeaders: object;
  httpStatus: number;
}

const exampleData : mockedMessageData = {
  clientUUID : "exampleUUID",
  contentType: "application/json",
  messageBody: "hello",
  httpHeaders: {Connection:"keep-alive"},
  httpStatus: 200,
}

let messageData : Ref<mockedMessageData> = ref(exampleData);
if ( localStorage.clientUUID != undefined ){
    clientUUID.value = localStorage.clientUUID;
}
fetch(host + '/api/mock/' + clientUUID.value).then( response => response.json() ).then(data => {putDataInFields(data);  });

function putDataInFields(data: mockedMessageData){
  clientUUID.value = data.clientUUID;
  localStorage.clientUUID = clientUUID.value
  mockMessageLink.value = host.replace("/mock","/api/mock")+"/r/"+clientUUID.value
  messageData = ref( data )
}

function showUpdatedCode(newCode : string){
  messageData.value.messageBody = newCode
}

</script>

<template>
  <div class="flex flex-col flex-none w-full xl:w-3/5 text-center dark:text-white gap-3 p-1">
    <div class="flex flex-col md:flex-row gap-4 items-center md:justify-stretch md:items-end">
      <div class="flex flex-col w-full">
        <label for="link">REST Service URL</label><br/>
        <div class="p-2 w-full border-slate-400 border-2 rounded-lg">
          <a class="underline" :href="mockMessageLink">{{ mockMessageLink }}</a>
        </div>
      </div>
      
      <SaveComponent v-bind:message-data="messageData"></SaveComponent>
    </div>
    <div class="flex flex-col md:flex-row w-full gap-4">
      <div class="w-full">
        <label for="contentType">Response Content Type</label><br/>
        <input  class="text-field" id="contentType" type="text" v-model="messageData.contentType"/>
      </div>
      
      <div class="w-full">
        <label for="httpStatus">Response HTTP Status</label><br/>
        <input class="text-field" id="httpStatus" type="text" v-model="messageData.httpStatus"/>
      </div>
      
    </div>
    <div class="flex text-left flex-col overflow-scroll gap-2 h-3/4">
      <label class="text-center" for="messageBody text-center">Response Body</label>
      <CodeEditorComponent
      @update:updated-code="showUpdatedCode"
      v-model="messageData.messageBody" 
      :config="{disabled:false,language:messageData.contentType}" 
      :code="messageData.messageBody" 
      id="messageBody" />
    </div>
    <HeadersComponent @update:httpHeaders="(newHeaders: object) => {messageData.httpHeaders = newHeaders }" :key="JSON.stringify(messageData.httpHeaders)" :headers-object="messageData.httpHeaders"></HeadersComponent>
  </div>
</template>

<style scoped></style>
