<template>
    <v-form @submit="saveDevice()">
        <v-text-field v-model="model.name" label="Name" required></v-text-field>

        <v-select v-model="model.type" :items="deviceTypes" label="Type"></v-select>
        <v-text-field v-model="model.address" label="Address" required></v-text-field>
        <v-text-field v-if="model.type === 'COMPANION'" v-model.number="model.params.port" label="Port (OSC)" type="number"></v-text-field>
        <v-text-field v-if="model.type === 'TALLYARBITER'" v-model.number="model.params.port" label="Port" type="number"></v-text-field>
        <v-checkbox v-model="model.enabled" label="Enabled"></v-checkbox>

        <v-btn color="primary" class="ma-2" @click.prevent="saveDevice()">Save</v-btn>
        <v-btn color="secondary" class="ma-2" @click.prevent="cancel()">Cancel</v-btn>
    </v-form>
</template>

<script lang="ts">
export default {
    props: {
        deviceId: String,
    },
    data () {
        return {
            deviceTypes: [ 'COMPANION', 'ATEM', 'TALLYARBITER' ],

            model: {
                name: '',
                type: '',
                address: '',
                enabled: true,
                params: {}
            }
        }
    },
    mounted () {
        if (this.deviceId !== '') {
            const device = this.$store.getters.getDevice(this.deviceId)

            if (device !== undefined) {
                this.model.name = device.config.name
                this.model.type = device.config.type
                this.model.address = device.config.address
                this.model.enabled = device.config.enabled
                this.model.params = device.config.params
            }
        }
    },
    methods: {
        saveDevice() {
            const data = {
                id: this.deviceId,
                ...this.model
            }
            this.$socket.emit('saveDevice', data)
            this.$emit('close')
        },
        cancel() {
            this.$emit('close')
        }
    }
}
</script>
