<template>
        <Tabs v-model:value="tabvalue" @update:value="tabUpdate">
            <TabList>
                <Tab  v-for="(change, index)  in changes" :value="index"> Change {{index +1}}  </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 v-for="(change, index)  in changes" :value="index"> 
                    <div class="flex grid grid-cols-1  gap-4">     
                        <!--<h2>Change {{index}} description</h2>-->
                        <div class="full-width">
                            <MdPreview class="editor" v-model="change.change_description" language="en-US"  />
                        </div>
                        <div>
                         <Button  clas="align-right" @click="toggleView"> {{ btn_toggle_label }}</Button>

                        </div>           

                    
                        <div class="full-width" v-if="!show_as_diff">
                            <HighCode 
                                    class="code"
                                    :codeValue="change.new_code"
                                    theme="light"
                                    width="100%"
                                    height="100%"
                                    :codeLines="true"
                                    langName=""
                                    lang="java"
                                    fontSize="12px"
                            ></HighCode>
                        </div>
                        <div class="m-0" v-else>
                                    <CodeDiff
                                        :old-string="change.previous_code"
                                        :new-string="change.new_code"
                                        output-format="side-by-side"
                                        />
                        </div> 
                    </div>
                </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="12px"
                            langName=""
                            lang="java"
                            ></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({
    changes: {
        type: Array,
        required: true
    }
});

const { changes } = toRefs(props);
const  classDetails  = ref(null);
const  classLoaded  = ref(false);
const show_as_diff = ref(false);
const btn_toggle_label = ref("Show Diff");
const tabvalue = ref(0);

onMounted(() => {
    

});

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

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

function toggleView() {
    show_as_diff.value = !show_as_diff.value;
    btn_toggle_label.value = show_as_diff.value ? "Show Code" : "Show Diff";
}
</script>

<style>


</style>
