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

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

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

                <div class="d-flex flex-row justify-content-center mt-5">
                    <h2 v-if="callWidget.callInfo.time_limit">{{callWidget.callInfo.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 {
    data(){
        return {
            showCalleeDetails: false
        }
    },
    computed: {
        ...mapState(["lobbies","settings", "callWidget"]),
    },
    watch: {
        'callWidget.active': {
            handler(newVal){
                if(!newVal){
                    let self = this

                    setTimeout(() => {
                        self.showCalleeDetails = false
                    }, 750)
                }
            }
        }
    },
    methods: {
        handleCall(acceptCall) {
            if(acceptCall){
                this.$socket.emit('callDecision', true)
                let lobby_data = {}
                let meeting = []

                for(let lobby of this.lobbies){
                    meeting = lobby.meetings.filter((x) => x.uid == this.callWidget.callInfo.meeting_uid)

                    if(meeting.length){
                        lobby_data = {
                            name: lobby.name,
                            uid: lobby.uid
                        }
                        break
                    }
                }

                if(!meeting.length){
                    return
                } else {
                    let data = {
                        uid: lobby_data.uid,
                        name: lobby_data.name,
                        selected_meeting: meeting[0]
                    }

                    this.$eventBus.$emit('joinMeeting', data)
                }
            } else {
                this.$socket.emit('callDecision', false)
                this.$store.commit('rejectCall')
            }
        },
        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>