<template>
    <div class="login-box">
        <div class="login-logo auth-branding text-center border-0">
            <span class="brand-text font-weight-light text-white">
                Welcome to
                <!-- <b>Dr. Smith & Dr. Brown's Office</b>! -->
                <b>{{ lobbyProp.name }}</b>
            </span>
        </div>
        <v-stepper v-model="stepper">
            <v-stepper-header>
                <v-stepper-step :complete="stepper > 1" step="1">Check In</v-stepper-step>

                <v-divider></v-divider>

                <v-stepper-step :complete="stepper > 2" step="2">Test your webcam</v-stepper-step>

                <v-divider></v-divider>

                <v-stepper-step step="3">Meet your Doctor</v-stepper-step>
            </v-stepper-header>

            <v-stepper-items>
                <v-stepper-content step="1">
                    <v-card class="mb-12" color="grey lighten-1" height="200px">
                        <div class="checkin-form d-flex justify-content-center align-items-center">
                            <form ref="baseForm">
                                <div class="row mb-3">
                                    <div class="col">
                                        <input type="text" name="strangerFirstName" class="form-control" placeholder="First Name" v-model="user.firstName" required />
                                    </div>
                                    <div class="col">
                                        <input type="text" name="strangerLastName" class="form-control" placeholder="Last Name" v-model="user.lastName" required />
                                    </div>
                                </div>

                                <div class="input-group mb-3">
                                    <input type="date" name="strangerDob" class="form-control" placeholder="Date of Birth" v-model="user.dateOfBirth" required />
                                </div>

                                <div class="form-group mt-5 mb-3">
                                    <select class="form-control custom-select" v-model="user.targetLobbyProUid" name="targetLobbyProUid">
                                        <option value>Do you wish to speak with particular Doctor?</option>
                                        <option v-for="pro in prosList" :value="pro.uid" :key="pro.uid">{{pro.name}}</option>
                                    </select>
                                </div>
                            </form>
                        </div>
                    </v-card>

                    <v-btn color="primary" @click="checkIn" :loading="loading">Continue</v-btn>
                </v-stepper-content>
            </v-stepper-items>
        </v-stepper>
    </div>
</template>

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

import VueSocketIO from "vue-socket.io";
import SocketIO from "socket.io-client";

Vue.use(
    new VueSocketIO({
        debug: true,
        connection: SocketIO(process.env.MIX_SOCKET_SERVICE_URL)
    })
);

export default {
    props: {
        lobbyProp: {
            type: Object,
            default: {
                uid: null,
                name: "Base",
                pros: []
            }
        },
        clientUid: {
            type: String,
            required: true
        }
    },
    computed: {
        // prosList(){
        //     return [{
        //         name: 'Test',
        //         type: 'Cardiologist',
        //         uid: 'someuid'
        //     }]
        // }
    },
    data() {
        return {
            user: {
                firstName: "",
                lastName: "",
                dateOfBirth: null,
                targetLobbyProUid: ""
            },
            meetingUid: "",
            meetingName: this.meetingProp.name,
            stepper: 1,
            cameraWorkingConfirmed: false,
            loading: false,
            /* Copied */
            readyForUse: false,
            uniqueId: Math.floor(Math.random() * Math.floor(10000)),
            counter: 1,
            openTokSession: null,
            publisher: null,
            screenPublisher: null,
            subscribers: [],
            publisherReady: false,
            sessionConnected: false,
            accessDialogShown: false,
            videos: [],
            videoGrid: [],
            videoGridPreview: [],
            maxCols: 12,
            maxRows: 4,
            rowHeight: 240,
            gridPadding: 8,
            loadingInProgress: false,
            prosList: []
        };
    },
    sockets: {
        reconnect: function() {
            this.$socket.emit("userData", {
                user: {
                    uid: this.clientUid,
                    name: `${this.firstName} ${this.lastName}`,
                    type: "STRANGER"
                },
                meeting: {
                    uid: this.meetingUid,
                    lobby_uid: this.lobbyProp.uid
                },
                lobbies_uid_list: [`${this.lobbyProp.uid}`]
            });

            if (this.meetingUid) {
                this.$socket.emit("meetingJoined", {
                    lobby_uid: this.lobbyProp.uid,
                    meeting_name: this.meetingName,
                    meeting_uid: this.meetingUid,
                    user: {
                        name: `${this.firstName} ${this.lastName}`,
                        type: "STRANGER",
                        uid: this.clientUid
                    }
                });
            }
        }
    },
    watch: {
        stepper: {
            handler(newVal) {
                sessionStorage.setItem("step", newVal);
            }
        }
    },
    methods: {
        checkIn() {
            this.loading = true;
            this.meetingName = `${this.user.firstName} ${this.user.lastName} ${this.user.dateOfBirth}`;
            if (!this.$refs.baseForm.reportValidity()) {
                this.loading = false;
                return;
            }

            $.ajax({
                url: "/post-to-api-ajax",
                method: "POST",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                },
                dataType: "json",
                data: {
                    _api: "/api/meeting/createAsStrangerPerformer",
                    lobbyUid: this.lobbyProp.uid,
                    title: this.meetingName,
                    strangerFirstName: this.user.firstName,
                    strangerLastName: this.user.lastName,
                    strangerDob: this.user.dateOfBirth,
                    targetLobbyProUid: this.user.targetLobbyProUid
                },
                success: data => {
                    if (!data.success) {
                        alert(data.message);
                        return;
                    }

                    window.location = `/client/meeting-participant/${data.data}`;
                    // this.stepper = 2;
                    // this.meetingUid = data.data;

                    // this.$socket.emit("userData", {
                    //     user: {
                    //         uid: this.clientUid,
                    //         name: `${this.firstName} ${this.lastName}`,
                    //         type: "STRANGER"
                    //     },
                    //     meeting: {
                    //         uid: this.meetingUid,
                    //         lobby_uid: this.lobbyProp.uid
                    //     },
                    //     lobbies_uid_list: [`${this.lobbyProp.uid}`]
                    // });

                    // if (!this.publisher) {
                    //     this.$nextTick(this.initializePublisher);
                    // }
                },
                error: jXhr => {},
                complete: () => {
                    this.loading = false;
                }
            });
        }
    },
    mounted() {
        this.prosList.push(...this.lobbyProp.pros);
    }
};
</script>

<style lang="scss" scoped>
.login-box {
    width: 100%;
}

.checkin-form {
    height: 200px;

    form {
        width: 75%;
    }
}
</style>