<template>
    <v-card
        flat
        color="rgba(0, 0, 0, 0)"
        class="content-container mx-0 pt-2 px-2"
    >
        <v-row
            no-gutters
            v-if="$store.getters.author.name.trim() !== ''"
        >
            <v-col
                style="min-width: 316px; max-width: 316px;"
                cols="12"
                sm="6"
                md="4"
                lg="3"
                xl="2"
            >
                <v-card
                    flat
                    tile
                    width="298"
                    height="127"
                    color="rgba(0, 0, 0, 0)"
                    class="pa-2 ma-2 d-flex"
                >
                    <v-row
                        no-gutters
                        style="flex-wrap: nowrap;"
                    >
                        <v-col cols="5">
                            <v-img
                                :src="$store.getters.author.image"
                                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.author.name }}</span>
                            </div>
                        </v-col>
                    </v-row>
                </v-card>
            </v-col>
            <v-col
                cols="12"
                sm="1"
                style="min-width: 100px; max-width: 100%;"
                class="flex-grow-1 flex-shrink-0 pa-2"
                v-if="$store.getters.author.wiki.trim() !== ''"
            >
                <v-card class="pa-0 ma-0">
                    <v-expansion-panels>
                        <v-expansion-panel>
                            <v-expansion-panel-title>
                                Wikipedia
                            </v-expansion-panel-title>
                            <v-expansion-panel-text>
                                {{ $store.getters.author.wiki }}
                            </v-expansion-panel-text>
                        </v-expansion-panel>
                    </v-expansion-panels>
                </v-card>
            </v-col>
        </v-row>

        <v-divider class="my-4"/>

        <v-card
            v-for="(cycle, cycleName) in $store.getters.books"
            :key="cycleName"
            flat
            tile
            color="rgba(0, 0, 0, 0)"
            class="d-flex align-content-start flex-wrap"
        >
            <v-card-title class="w-100" v-if="cycleName !== 'no_cycle'">{{ $t("cycle") }} &laquo;{{ cycleName }}&raquo;</v-card-title>
            <v-card-text class="d-flex align-content-start flex-wrap pa-0 ma-0">
                <v-row no-gutters>
                    <v-col
                        v-for="(item, index) in cycle"
                        :key="index"
                        cols="12"
                        sm="6"
                        md="4"
                        lg="3"
                        xl="2"
                    >
                        <v-card
                            hover
                            ripple
                            outlined
                            tile
                            height="127"
                            class="pa-2 ma-2"
                            @click="bookClick(item)"
                        >
                            <v-row
                                no-gutters
                                style="flex-wrap: nowrap;"
                            >
                                <v-col
                                    cols="5"
                                    style="min-width: 127px; max-width: 127px;"
                                    class="flex-grow-0 flex-shrink-0"
                                >
                                    <v-img
                                        :src="item.image"
                                        height="95px"
                                        width="95px"
                                        contain
                                        class="book-image ma-2"
                                    >
                                    </v-img>
                                </v-col>
                                <v-col
                                    cols="1"
                                    class="flex-grow-1 flex-shrink-0"
                                    style="min-width: 80px; max-width: 100%"
                                >
                                    <div class="book-title">
                                        <span class=" text-center font-weight-medium">{{ item.title }}</span>
                                    </div>
                                </v-col>
                            </v-row>
                        </v-card>
                    </v-col>
                </v-row>
            </v-card-text>
            <v-divider class="my-4"/>
        </v-card>
    </v-card>
</template>

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

    export default {
        name: "BooksLib",

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

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

        data: () => ({
        }),

        methods: {
            bookClick (book) {
                this.$emit("bookSelected", book);
            }
        }
    }
</script>

<style lang="sass" scoped>
    .book
        &-image
            border-radius: 5px
            border: none
        &-title
            height: 100%
            line-height: 100px
            text-align: center
            > span
                display: inline-block
                vertical-align: middle
                line-height: normal

    .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
</style>
