<template>
    <div>
        <div v-if="!data_loaded && !loading_data" class="card flex flex-col gap-4 p-1">
            <div v-for="input in scenario.inputs" :key="input.name" class="flex flex-col gap-2" >
                <label :for="input.name">{{ input.label }}</label>
                <component
                        :is="getInputComponent(input.type)"
                        :id="input.name"
                        v-model="inputData[input.name]"
                        class="full-width-input"
                    />
            </div>
                <div class="flex justify-center">
                <Button label="Submit" @click="execScenario" class=""/>
            </div>
            
        </div>
        <div class="flex justify-center items-center">
            <ProgressSpinner v-if="loading_data" style="width: 50px; height: 50px" strokeWidth="8" fill="transparent"
                animationDuration=".5s" aria-label="Custom ProgressSpinner" />
        </div>
        <div v-if="data_loaded" class="card flex flex-col gap-4 p-1">
                
            <div class="flex items-center gap-2 p-0">
                <button class="p-button p-button-primary" @click="addToCanvas">Add to Canvas</button>
            </div>
            
            <div class="flex mt-2">
                <Editor  v-model="scenario_output"  editorStyle="height: 320px" />
            </div>
        </div> 
    </div>

</template>

<script setup>
    import axios from 'axios';
import InputText from 'primevue/inputtext';
import ProgressSpinner from 'primevue/progressspinner';
import Select from 'primevue/select';
import Textarea from 'primevue/textarea';
import { defineEmits, ref } from 'vue';

    import showdown from 'showdown';
    const loading_data = ref(false);
    const data_loaded = ref(false);
    const props = defineProps(['scenario']);
    const emit = defineEmits(['add'])

    const inputData = ref({});
    const scenario_output = ref("Questo è un testo di prova");

    const testConverter=()=>{
        var converter = new showdown.Converter(),
        text      = '# hello, markdown!',
        html      = converter.makeHtml(text);
        console.log(html);
    }
    const getInputComponent = (type) => {
        switch (type) {
            case 'text':
                return InputText;
            case 'textarea':
                return Textarea;
            case 'select':
                return Select;
            default:
                return InputText;
        }
    };

    const execScenario = () => {
        loading_data.value = true;
        data_loaded.value = false;

        const data = {
            scenario_id: props.scenario.id,
            inputs: { ...inputData.value }
        };

        console.log(data);

        axios.post('/scenarios/execute', data)
            .then(response => {
                loading_data.value = false;
                data_loaded.value = true;
                console.log(response);
                var converter = new showdown.Converter();
                scenario_output.value = converter.makeHtml(response.data.stringOutput);
            })
            .catch(error => {
                console.error('Error executing scenario:', error);
            });
    };
    
    const addToCanvas = () => {
        console.log("Aggiunto");
        emit('add',scenario_output.value)  
    }
     
</script>