<template>
    <v-card
        flat
        tile
        color="rgba(0, 0, 0, 0)"
        class="d-flex align-content-start flex-wrap content-container mx-0 pa-2"
    >
        <v-row
            no-gutters
            class="justify-center"
        >
            <v-col
                style="min-width: 316px; max-width: 316px;"
                cols="12"
                sm="6"
                md="5"
                lg="4"
            >
                <v-card
                    flat
                    tile
                    width="298"
                    height="127"
                    color="rgba(0, 0, 0, 0)"
                    class="pa-2 ma-2 d-flex"
                    v-if="$store.getters.book.author.trim() !== ''"
                >
                    <v-row
                        no-gutters
                        style="flex-wrap: nowrap;"
                    >
                        <v-col cols="5">
                            <v-img
                                :src="$store.getters.book.photo"
                                height="95px"
                                width="95px"
                                contain
                                class="author-image ma-2"
                            >
                            </v-img>
                        </v-col>
                        <v-col cols="7" class="px-2">
                            <div class="author-name">
                                <span class="font-weight-medium">{{ $store.getters.book.author }}</span>
                            </div>
                        </v-col>
                        <v-divider class="mt-4"></v-divider>
                    </v-row>
                </v-card>

                <v-row no-gutters>
                    <v-col cols="12" class="d-flex justify-center" v-if="$store.getters.book.cover.trim() !== ''">
                        <v-img
                            :src="$store.getters.book.cover"
                            height="200px"
                            width="200px"
                            contain
                            class="d-inline-block ml-2"
                        >
                        </v-img>
                    </v-col>
                    <v-col cols="12" class="d-flex justify-center mt-2" v-if="$store.getters.book.title.trim() !== ''">{{ $store.getters.book.title }}</v-col>
                    <v-col cols="12" class="d-flex justify-center mt-4" v-if="$store.getters.book.wiki.trim() !== ''">
                        <v-expansion-panels>
                            <v-expansion-panel>
                                <v-expansion-panel-title>
                                    Wikipedia
                                </v-expansion-panel-title>
                                <v-expansion-panel-text>
                                    {{ $store.getters.book.wiki }}
                                </v-expansion-panel-text>
                            </v-expansion-panel>
                        </v-expansion-panels>
                    </v-col>
                </v-row>
            </v-col>
            <v-col
                cols="12"
                sm="8"
                md="7"
                lg="6"
                class="flex-grow-1 flex-shrink-0 pa-2"
                v-if="illustrated"
                style="background-color: yellow"
            >
                2
            </v-col>
            <v-col
                cols="12"
                sm="7"
                :md="illustrated ? 3 : 6"
                :lg="illustrated ? 2 : 5"
                class="flex-grow-1 flex-shrink-0 pa-2"
            >
                <v-list class="transparent-bg">
                    <v-list-item
                        v-for="(item, index) in $store.getters.chapters"
                        :key="index"
                        :prepend-icon="index == currentChapter ? 'mdi-play' : ''"
                        :title='item.title'
                        :class="index !== currentChapter ? 'no-selection-pl' : ''"
                        @click="loadChapter(index, 0, true)"
                    ></v-list-item>
                </v-list>
            </v-col>
        </v-row>
    </v-card>
</template>

<script>
    import { useDisplay } from "vuetify";

    export default {
        name: "BookReader",

        setup () {
            const { smAndDown, smAndUp, xs, md, lg, xl } = useDisplay();

            return {
                smAndDown, smAndUp, xs, md, lg, xl
            }
        },

        data: () => ({
            illustrated: false,
            currentChapter: 0
        })
    }
</script>

<style lang="sass" scoped>
    .author
        &-image
            border-radius: 125px
            border: solid #fff 2px
            box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)
        &-name
            height: 100%
            line-height: 100px
            > span
                display: inline-block
                vertical-align: middle
                line-height: normal

    .transparent-bg
        background: transparent

    .v-list-item.no-selection-pl
        padding-left: 74px
</style>
