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

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

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

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

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

<script>
import { mapState } from "vuex";

export default {
    data() {
        return {
            showCalleeDetailsUid: null
        };
    },
    computed: {
        ...mapState(["lobbies", "settings", "callWidget", "callToNoAnswer"])
    },
    watch: {
        // "callWidget.active": {
        //     handler(newVal) {
        //         if (!newVal) {
        //             let self = this;
        //             setTimeout(() => {
        //                 self.showCalleeDetails = false;
        //             }, 750);
        //         }
        //     }
        // }
        callToNoAnswer(newVal) {
            this.$socket.emit("callDecision", {
                uid: newVal.callInfo.uid,
                accepted: false,
                ring_uid: newVal.callInfo.ring_uid,
                lobby_call_uid: newVal.callInfo.lobby_call_uid
            });
        }
    },
    methods: {
        handleCall(call, acceptCall) {
            if (acceptCall) {
                this.$socket.emit("callDecision", {
                    uid: call.callInfo.uid,
                    accepted: true,
                    ring_uid: call.callInfo.ring_uid,
                    lobby_call_uid: call.callInfo.lobby_call_uid
                });

                if (call.callInfo.ring_uid) {
                    $.ajax({
                        url: "/post-to-api-ajax",
                        method: "POST",
                        headers: {
                            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                        },
                        data: {
                            _api: "/api/meetingRing/ringAnswer",
                            uid: call.callInfo.ring_uid
                        },
                        success: data => {
                            if (!data.success) {
                                alert("Something went wrong.");
                                console.error(data.message);
                                return;
                            }
                            const joinData = {
                                uid: null,
                                name: null,
                                selected_meeting: call.callInfo.meeting
                            };

                            this.$eventBus.$emit("joinMeeting", joinData);
                            this.$store.commit("rejectCall", call);
                        },
                        error: jXhr => console.log(jXhr)
                    });
                } else {
                    let lobby_data = {};
                    let meeting = [];
                    let data = {};

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

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

                    if (!meeting.length) {
                        return;
                    } else {
                        data = {
                            uid: lobby_data.uid,
                            name: lobby_data.name,
                            selected_meeting: meeting[0]
                        };
                    }
                    this.$eventBus.$emit("joinMeeting", data);
                    this.$store.commit("rejectCall", call);
                }
            } else {
                this.$socket.emit("callDecision", {
                    uid: call.callInfo.uid,
                    accepted: false,
                    ring_uid: call.callInfo.ring_uid,
                    lobby_call_uid: call.callInfo.lobby_call_uid
                });

                if (call.callInfo.ring_uid) {
                    $.ajax({
                        url: "/post-to-api-ajax",
                        method: "POST",
                        headers: {
                            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                        },
                        data: {
                            _api: "/api/meetingRing/ringReject",
                            uid: call.callInfo.ring_uid
                        },
                        error: jXhr => console.log(jXhr)
                    });
                }
                this.$store.commit("rejectCall", call);
            }
        },
        shiftForm(call) {
            console.log(call);
            if (!this.settings.newMeetingNotificationExpanded) {
                if (this.showCalleeDetailsUid == call.uid) this.showCalleeDetailsUid = null;
                else this.showCalleeDetailsUid = call.uid;
                // this.showCalleeDetails = !this.showCalleeDetails;
            } else {
                this.showCalleeDetailsUid = call.uid;
            }
        }
    },
    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;
    }
}

.ring-container {
    position: absolute;
    display: flex;
    flex-direction: column;
    right: 16px;
    bottom: 16px;
}

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

    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>