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

<script setup>
import { defineProps, onMounted, ref, toRefs } from 'vue';
import CiaFlowCodeViewer from './CiaFlowCodeViewer.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>
