<template>
        <Tabs value="0" @update:value="tabUpdate">
            <TabList>
                <Tab value="0">Change Description</Tab>
                <Tab value="1">Code Diff</Tab>
                <Tab value="class-description">Class RE</Tab>
                <Tab value="class-code">Actual Class Code</Tab>
            </TabList>
            <TabPanels>
                <TabPanel value="0">
                    <p class="m-0">
                        <MdPreview class="editor" v-model="change.change_description" language="en-US"  />
                    </p>
                </TabPanel>
                <TabPanel value="1">
                    <p class="m-0">
                        <div class="flex items-center gap-4 mb-4">
                            <CodeDiff
                                :old-string="change.previous_code"
                                :new-string="change.new_code"
                                output-format="side-by-side"
                                />
                        </div>
                    </p>
                </TabPanel>
                <TabPanel value="class-description">
                    <p class="m-0" v-if="classLoaded">
                        <MdPreview class="editor" v-model="classDetails.reDescription" language="en-US"  />
                    </p>
                    <Skeleton v-else width="100%" height="10rem"></Skeleton>

                </TabPanel>
                <TabPanel value="class-code">
                  
                        <p v-if="classLoaded" class="m-0"> 

                            <HighCode
                            class="code"
                            :codeValue="classDetails.code"
                            theme="dark"
                            width="100%"
                            height="100%"
                            :codeLines="true"
                            fontSize="14px"
                            ></HighCode>
                        </p>
                        <Skeleton v-else width="100%" height="10rem"></Skeleton>

                    
                   
                </TabPanel>
            </TabPanels>
        </Tabs>
       
</template>

<script setup>
import axios from 'axios';
import { MdPreview } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import Tab from 'primevue/tab';
import TabList from 'primevue/tablist';
import TabPanel from 'primevue/tabpanel';
import TabPanels from 'primevue/tabpanels';
import Tabs from 'primevue/tabs';
import { CodeDiff } from 'v-code-diff';
import { defineProps, onMounted, ref, toRefs } from 'vue';
import { HighCode } from 'vue-highlight-code';
import 'vue-highlight-code/dist/style.css';


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

const { change } = toRefs(props);
const  classDetails  = ref(null);
const  classLoaded  = ref(false);

onMounted(() => {
    

});

function tabUpdate(value) {
    console.log(value);
    if ((value === 'class-description'  || value ==='class-code') && classLoaded.value === false) {

        console.log("Getting class details : ", change.value.classname);
        axios.get("/source-module/getClassDetailedInfo?className=" +  change.value.classname ).then(resp => {
            classDetails.value = resp.data;
            classLoaded.value = true;
        })
        .catch(error => {
            console.error('Error during the request:', error);
        });
    }
}
</script>

<style>


</style>
