<template>
    <div
        :class="[
            theme === 'm14' ? 'card-quote text-left' : 'card-media',
            theme ? theme : '',
        ]"
        class="card"
        @click="selectedCard(index)"
    >
        <template v-if="theme === 'm14'">
            <div class="card-body">
                <slot></slot>
            </div>
            <div class="card-button">
                <fugger-button type="quote-btn">
                    <div
                        class="w-100 d-flex flex-wrap flex-grow align-items-end"
                    >
                        <h6>
                            {{ buttonlabel }}
                        </h6>
                    </div>
                </fugger-button>
            </div>
        </template>
        <template v-else>
            <img v-if="bgimage" class="card-image" :src="bgimage" alt="" />
            <div class="card-body square-btn-drop-shadow">
                <div class="card-btn">
                    <fugger-button
                        :iconname="
                            mediatype === 'format_movie'
                                ? 'card-next-icon'
                                : 'arrow-next-icon'
                        "
                        :class="[theme, mediatype]"
                        :theme="mediatype === 'format_movie' ? 'dark' : 'light'"
                        type="card-btn"
                        width="100%"
                    >
                        <div class="w-100 h-100 d-flex flex-wrap">
                            <h5 class="w-100 text-left flex-grow-1">
                                {{ buttonlabel }}
                            </h5>
                            <p class="sub-label pt-0 m-0 text-left">
                                {{ sublabel }}
                            </p>
                        </div>
                    </fugger-button>
                </div>
            </div>
        </template>
    </div>
</template>

<script>
import FuggerButton from './FuggerButton.vue'
import { eventbus } from './index'

export default {
    name: 'Card',
    components: {
        FuggerButton,
    },
    props: {
        theme: {
            type: String,
            default: 'desktop',
            validator: function(value) {
                // The value must match one of these strings
                return ['desktop', 'm07', 'm14'].indexOf(value) !== -1
            },
        },
        index: {
            type: Number,
            default: 0,
        },
        mediatype: {
            type: String,
            default: 'text-video',
        },
        bgimage: {
            type: String,
            default: '',
        },
        buttonlabel: {
            type: String,
            default: '',
        },
        sublabel: {
            type: String,
            default: '',
        },
    },
    data() {
        return {}
    },
    mounted() {},
    methods: {
        selectedCard(card) {
            console.log('cardSelected', card)
            eventbus.$emit('cardSelected', card)
        },
    },
}
</script>

<style lang="scss">
@import 'assets/scss/variables';
@import 'assets/scss/buttons';
@import 'assets/scss/global';

.card {
    background: none;
    img {
        overflow: hidden;
        object-fit: fill;
        width: 100%;
        height: 100%;
    }
    .card-image {
        filter: grayscale(0.5);
    }

    &.card-media {
        width: calc(300vw * var(--pxToVw));
        height: calc(320vw * var(--pxToVw));
        border: 0 !important;
        border-radius: 0 !important;

        .card-body {
            position: absolute;
            bottom: 0;
            padding: calc(15vw * var(--pxToVw));
            width: 100%;
            background-color: transparent;
            .sub-label {
                align-self: flex-end;
            }
            button {
                width: 100%;
            }
        }
        &.m07 {
            min-width: unset;
            width: calc(232.5vw * var(--pxToVw));
            height: calc(211vw * var(--pxToVw));
            .card-body {
                padding: calc(21.25vw * var(--pxToVw))
                    calc(21.25vw * var(--pxToVw)) calc(12.5vw * var(--pxToVw));
            }
        }
    }
    &.card-quote {
        border: none;
        box-shadow: none;
        position: relative;
        border-radius: 0 !important;
        background-color: transparent;
        width: calc(433vw * var(--pxToVw));
        transition: height 0.3s ease-in-out;
        height: calc(var(--m14-card-height) * var(--pxToVw));

        &:before {
            position: absolute;
            content: '';
            left: 50%;
            top: calc(0vw * var(--pxToVw));
            width: calc(59vw * var(--pxToVw));
            transform: translateX(-50%);
            border-left: calc(29.5vw * var(--pxToVw)) solid transparent;
            border-right: calc(29.5vw * var(--pxToVw)) solid transparent;
            border-bottom: calc(44.25vw * var(--pxToVw)) solid white;
        }

        &:after {
            position: absolute;
            content: '';
            display: none;
            width: calc(20vw * var(--pxToVw));
            height: calc(20vw * var(--pxToVw));
            border-left: calc(5vw * var(--pxToVw)) solid transparent;
            border-right: calc(5vw * var(--pxToVw)) solid transparent;

            border-bottom: calc(5vw * var(--pxToVw)) solid black;
        }

        .card-body {
            overflow: hidden;
            position: relative;
            bottom: 0;
            margin-top: calc(29.5vw * var(--pxToVw));
            margin-bottom: calc(2.5vw * var(--pxToVw));
            width: 100%;
            max-width: calc(433vw * var(--pxToVw));
            height: calc(382vw * var(--pxToVw));
            background-color: white;
            padding: calc(75vw * var(--pxToVw)) calc(50vw * var(--pxToVw))
                calc(50vw * var(--pxToVw)) calc(50vw * var(--pxToVw));
        }
    }
}
</style>
