<template>
    <v-container>
        <v-dialog
                v-model="createDialog"
                max-width="290"
        >
            <v-card>
                <v-card-title>
                    <v-row>
                        <v-col cols="12"><v-text-field v-model="roomCreate.room_name" placeholder="name"></v-text-field></v-col>
                        <v-col cols="12"><v-text-field v-model="roomCreate.publisher_count" placeholder="Room Publisher Count"></v-text-field></v-col>
                        <v-col cols="12"><v-select label="Video Codec" v-model="roomCreate.video_codec" :items="vcodecs"></v-select></v-col>
                        <v-col cols="12"><v-select label="Audio Codec"  v-model="roomCreate.audio_codec" :items="acodecs"></v-select></v-col>
                    </v-row>
                </v-card-title>
                <v-card-actions>
                    <v-btn @click="createDialog=false">Cancel</v-btn>
                    <v-spacer></v-spacer>
                    <v-btn @click="saveRoom">Create</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <v-btn v-if="canCreate" @click="createDialog=true">Create Room</v-btn>
        <v-row>
            <v-col v-for="room in rooms" :key="room.id" cols="12">
                <v-btn @click="joinRoom(room.ridn)" text>{{ room.room_name }}</v-btn>
            </v-col>
        </v-row>
    </v-container>
</template>

<script>
    export default {
        name: "Room",
        data: () => ({
           rooms: [],
            canCreate: false,
            createDialog: false,
            vcodecs: ['VP8','VP9','h264'],
            acodecs: ['OPUS'],
            roomCreate: {
               video_codec: 'VP9',
                audio_codec: 'OPUS',
                publisher_count: 16,
                room_name: ''
            }
        }),
        mounted () {
            this.getRooms()
        },
        methods: {
            saveRoom () {
                this.$axios.post('create/room',this.roomCreate).then(response => {
                    this.roomCreate ={
                        video_codec: 'VP9',
                            audio_codec: 'OPUS',
                            publisher_count: 16,
                            room_name: ''
                    }
                    this.getRooms()
                    this.createDialog = false
                    console.log(response)
                })
            },
            joinRoom (id) {
              this.$router.push('/room/' + id)
            },
            getRooms() {
                this.$axios.get('rooms').then(response => {
                    console.log(response)
                    this.rooms = response.data.rooms
                    this.canCreate = response.data.can_create
                }).catch(() => {
                    this.$router.push('/')
                })
            }
        }
    }
</script>

<style scoped>

</style>
