<template>
    <div v-if="parsedOuput != null">
        <h1>{{ parsedOuput.title }}</h1>
        <MarkdownViewer class="editor" v-model="parsedOuput.description" />
        <CiaFlowCodeViewer :changes="parsedOuput.changes"> </CiaFlowCodeViewer>
    </div>
</template>

<script setup>
import { defineProps, onMounted, ref, toRefs } from 'vue';
import CiaFlowCodeViewer from './CiaFlowCodeViewer.vue';
import MarkdownViewer from './MarkdownViewer.vue';

const parsedOuput = ref(null);

//66f55e4b2894530b1c154f69
const props = defineProps({
    scenario_output: {
        type: String,
        required: true
    }
});

const { scenario_output } = toRefs(props);

onMounted(() => {
    console.log(scenario_output.value.replace('```json', '').replace('```', ''));
    var jsonParsed = JSON.parse(scenario_output.value.replace('```json', '').replace('```', ''));
    console.log(jsonParsed);
    parsedOuput.value = jsonParsed;
});
</script>

<style>
@import '@vue-flow/core/dist/style.css';
@import '@vue-flow/core/dist/theme-default.css';
@import '@vue-flow/controls/dist/style.css';
@import '@vue-flow/minimap/dist/style.css';

.basic-flow {
    height: 90vh;
    width: 100%;
}

.vue-flow__minimap {
    transform: scale(75%);
    transform-origin: bottom right;
}

.basic-flow.dark {
    background: #2d3748;
    color: #fffffb;
}

.basic-flow.dark .vue-flow__node {
    background: #4a5568;
    color: #fffffb;
}

.basic-flow.dark .vue-flow__node.selected {
    background: #333;
    box-shadow: 0 0 0 2px #2563eb;
}

.basic-flow .vue-flow__controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.basic-flow.dark .vue-flow__controls {
    border: 1px solid #fffffb;
}

.basic-flow .vue-flow__controls .vue-flow__controls-button {
    border: none;
    border-right: 1px solid #eee;
}

.basic-flow.dark .vue-flow__controls .vue-flow__controls-button:hover {
    background: #4d4d4d;
}

.basic-flow.dark .vue-flow__edge-textbg {
    fill: #292524;
}

.basic-flow.dark .vue-flow__edge-text {
    fill: #fffffb;
}

.vue-flow__node-class-node {
    border: 1px solid #dc07bc;
    padding: 10px;
    border-radius: 5px;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    max-width: 250px;
    min-width: 200px;
}
</style>
