<template>
    <div>
        <v-container>
            <v-row no-gutters>
                <v-col cols = "12" md="7">
                    <v-sheet>
                        <v-card class="topCard mt-12">
                            <h1 class="headTitle pb-6 px-12">
                                {{ this.title1 }}
                            </h1>
                            <h2 class="headTitle pb-6 px-12">
                                {{ this.subtitle1 }}
                            </h2>

                            <p class="px-12 py-6 paraCard">
                                <span>Tags: </span>
                                <span class="tagSpan mx-2 px-4" v-for="item in finalTags" :key="item">
                                    {{ item }}
                                </span>
                            </p>

                            <p class="paraCard pt-2">
                                Author:
                                <v-chip
                                outlined
                                large
                                class="pa-5 mr-4"
                                color="var(--color3)"
                                >
                                    {{ this.author1 }}
                                </v-chip> 
                            </p>
                            
                        </v-card>
                    </v-sheet>
                </v-col>

                <v-col cols = "12" md="5">
                    <v-sheet>
                        <v-card class="topCard mt-12">
                            <v-img
                            transition="scale-transition"
                            v-show="show"
                            max-width="250"
                            :src="require(`~/assets/imgs/books/${this.idPage}.webp`)"
                            >
                            </v-img>
                        </card>
                    </sheet>
                    
                </col>
            </row>

            <row no-gutters class="my-16">
                <col cols = "12" md="7">
                    <div class="tozihClass">
                        <div>
                            <h1 class="text-center pa-5">Book Introduction {{ this.title1 }}</h1>
                            <p class="pa-4">
                                {{ this.kamelTozih1 }}
                            </p>
                        </div>
                    </div>
                </col>

                <col cols = "12" md="5">
                    <div class="tozihClass">
                        <div>
                            <h1 class="text-center pa-5">
                                Important Book Titles
                            </h1>
                            <ul class="px-12">
                                <li :key="item" v-for="item in titleSet">
                                    {{ item }}
                                </li>
                            </ul>
                        </div>
                    </div>
                </col>
            </row>
        </container>
    </div>
</template>

<script>

export default {
    data() {
        return {
            allBooks: [],
            allTags: [],
            finalTags: [],
            idPage: 3,
            title1: "",
            author1: "",
            subtitle1: "",
            kamelTozih1: "",
            titleSet: [],
            show: false
        }   
    },
    methods: {
        findData: function(inputArr) {
            this.title1 = inputArr.find(x => x.id == this.idPage).title;
            this.author1 = inputArr.find(x => x.id == this.idPage).author;
            this.kamelTozih1 = inputArr.find(x => x.id == this.idPage).kamelTozih;
            this.subtitle1 = inputArr.find(x => x.id == this.idPage).tozih;
            this.titleSet = inputArr.find(x => x.id == this.idPage).titleList;
            
            let tagIds = inputArr.find(x => x.id == this.idPage).tags;
            this.findTags(tagIds);
        },

        findTags(inputTags) {
            let arrInit = [];
            inputTags.forEach(element => {
                arrInit.push( this.allTags.find(x => x.id == element).name );
            });
            this.finalTags = arrInit;
        },

        setHeight() {
            let elem = document.querySelectorAll('.tozihClass');
            let finalHeight = window.getComputedStyle(elem[1]).getPropertyValue("height");
            console.log(finalHeight);
            document.documentElement.style.setProperty("--equHeigth", finalHeight);
            document.body.style.setProperty("--equHeigth", finalHeight);
        }
    },
    mounted() {
        this.allBooks = this.$store.state.books.list;
        this.allTags = this.$store.state.books.tags;
        this.findData(this.allBooks);

        if (document.readyState === "complete") { 
            this.setHeight(); 
        }
        
    
    },
    created() {
        this.show = true;
    }
}
</script>

<style scoped>
/* CSS Styles */
</style>