<template>
  <v-btn
        color="pink"
        class="callBtn"
        :class="{'showingAll': showCalleeDetails, 'active': call && call.time_limit > 0}"
        dark
        absolute
        bottom
        right
        ripple
        @click="shiftForm"
        >
        <div v-if="call">
            <div class="d-flex flex-row align-items-center btnHeader">
                <v-icon>mdi-video</v-icon>
                <div class="ml-2 incomingCallMsg">Incoming Call {{!showCalleeDetails ? `(${call.time_limit})` : ''}}</div>
            </div>
            <div class="fullDetails mt-3">
                <div class="d-flex flex-row justify-content-between">
                    <span>Callee:</span>
                    <span>{{call.user_type}}</span>
                </div>

                <div class="d-flex flex-row justify-content-between">
                    <span>Lobby:</span>
                    <span>{{call.lobby || 'None'}}</span>
                </div>

                <div class="d-flex flex-row justify-content-between mt-2">
                    <span>{{call.name || 'Unknown'}}</span>
                </div>

                <div class="d-flex flex-row justify-content-center mt-5">
                    <h2>{{call.time_limit}}</h2>
                </div>

                <div class="d-flex flex-row justify-content-between mt-5 ctrlBtns">
                    <span @click="handleCall(true)">
                        Accept
                    </span>
                    /
                    <span @click="handleCall(false)">
                        Reject
                    </span>
                </div>
            </div>
        </div>
    </v-btn>
</template>

<script>
import { mapState } from "vuex"

export default {
    props: {
        call: {
            type: Object
        }
    },
    data(){
        return {
            showCalleeDetails: false
        }
    },
    computed: {
        ...mapState(["settings"]),
    },
    watch: {
        call: {
            deep: true,
            handler(newVal){
                if(newVal.time_limit == 0){
                    let self = this

                    setTimeout(() => {
                        self.showCalleeDetails = false
                    }, 750)
                }
            }
        }
    },
    methods: {
        handleCall(acceptCall) {
            if(acceptCall){
                console.log('Call accepted!')
            } else {
                console.log('Call Rejected!')
            }
        },
        shiftForm(){
            if(!this.settings.newMeetingNotificationExpanded){
                this.showCalleeDetails = !this.showCalleeDetails
            } else {
                this.showCalleeDetails = true
            }
        }
    },
    created(){
        if(this.settings.newMeetingNotificationExpanded){
            this.showCalleeDetails = true
        }
    }
}
</script>

<style scoped lang="scss">

    @keyframes Glowing {
        0% {
            opacity: 0.3;
        }
        30% {
            opacity: 0.8;
        }
        100% {
            opacity: 1;
        }
    }

    .callBtn {
        z-index: 1000;
        border-radius: 28px;
        height: 56px !important;
        width: 56px !important;
        min-width: 56px !important;
        overflow-x: hidden;
        overflow-y: hidden;

        transition: all 0.5s;

        transform: translateX(25vw);

        .btnHeader {
            animation: 0.7s Glowing infinite alternate ease-out;
        }

        &.active {
            transform: translateX(0);
        }

        .incomingCallMsg {
            transition: all 0.3s;
            display: none;
            opacity: 0;
        }

        &:hover, &.showingAll {
            width: 240px !important;

            .incomingCallMsg {
                display: block;
                opacity: 1;
            }
        }

        /* Full State */

        .fullDetails {
            .ctrlBtns span {
                &:hover {
                    text-decoration: underline;
                }
            }
        }

        &.showingAll {
            height: 400px !important;
        }

        &:not(.showingAll) {
            .fullDetails {
                display: none !important;
            }
        }

    }

</style>