<script setup lang="ts">
import { ref } from 'vue';
import EncodeUriButton from '@components/encoder/EncodeUriButtonComponent.vue'
import CodeEditorComponent from '@/components/CodeEditorComponent.vue';


const uri = ref("")

function setTextFieldValue(newVal : string){
    console.log(newVal)
    uri.value = newVal
}

function clear(){
    uri.value = "";
}
</script>

<template>
    <div class="flex flex-col w-full h-full gap-4" id="layout">
        <div id="toolbar" class="flex flex-col gap-4 items-center lg:flex-row place-content-between">
            <span class="dark:text-slate-100">URI Encoder</span>
            <div class="flex flex-wrap gap-2 justify-center">
                <button class="tool-button" @click="clear()">Clear</button>
                <EncodeUriButton @update:result="setTextFieldValue" :code="uri" operation="Encode" />
                <EncodeUriButton @update:result="setTextFieldValue" :code="uri" operation="Decode" />  
            </div>
        </div>
        <CodeEditorComponent @update:updated-code="setTextFieldValue" :code="uri" :config="{disabled:false,language:'uri'}" />
    </div>
</template>