<template>
  <v-row no-gutters>
    <v-col cols="12" sm="12">
      <v-card class="pa-2 ma-2" variant="outlined" >
        <v-card-title>VideoHub Emulator</v-card-title>
        <v-container class="pa-2 ma-2">
          <!-- <v-form>
            <v-text-field type="number" label="Inputs" v-model="inputs" />
            <v-text-field type="number" label="Outputs" v-model="outputs" />
          </v-form> -->
          <v-table>
            <template v-slot:default>
                <thead>
                <tr>
                    <th class="text-left">Output</th>
                    <th class="text-left">Device</th>
                    <th class="text-left">Action</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in mappings" :key="item.output">
                    <td>Output {{ item.output + 1 }}
                      <v-btn v-if="item.deviceId" icon="mdi-pencil" title="Edit mapping" size="small" variant="outlined"  @click="startEdit(item.output)" class="ml-5" />
                      <v-btn v-else icon="mdi-plus" title="Add mapping" size="small" variant="outlined"  @click="startEdit(item.output)" class="ml-5" />
                      <v-btn class="ma-2" icon="mdi-delete" title="Delete mapping" size="small" variant="outlined"  @click="deleteMapping(item.output)" v-if="item.deviceId !== ''" />
                    </td>
                    <td>
                      {{ getDeviceName(item.deviceId) }}
                      <!-- <v-select :items="devices" item-value="config.id" item-title="config.name" label="Device" :clearable="true" /> -->
                    </td>
                    <td>
                      {{ getDeviceAction(item.deviceId, item.action) }}
                    </td>
                    <!-- <td><v-select :items="outputItems" /></td> -->
                </tr>
                </tbody>
            </template>
          </v-table>
          <v-dialog v-model="showEdit" max-width="600">
            <v-card>
              <v-card-title class="headline">Output {{ edit.id + 1 }}</v-card-title>
              <v-card-text>
                <v-form @submit.prevent="saveEdit(edit.id)">
                  <v-select v-model="edit.deviceId" :items="devices" item-value="config.id" item-title="config.name" label="Device" />
                  <v-select v-model="edit.action" :items="getDeviceActions(edit.deviceId)" item-value="id" item-title="label" label="Action" v-if="edit.deviceId !== ''" />
                </v-form>
              </v-card-text>
              <v-card-actions>
                <v-btn color="red darken-1" text @click="deleteMapping(edit.id)" v-if="edit.deviceId !== ''">Delete</v-btn>
                <v-spacer></v-spacer>
                <v-btn color="darken-1" text @click="cancelEdit()">Cancel</v-btn>
                <v-btn color="green darken-1" text @click="saveEdit(edit.id)">OK</v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>
        </v-container>
      </v-card>
    </v-col>
  </v-row>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'videohub-emulator',
  components: {
  },
  data () {
    return {
      edit: {
        id: -1,
        deviceId: '',
        action: ''
      }
    }
  },
  computed: {
    devices () { return this.$store.state.devices },
    mappings () { return this.$store.state.videohubMappings },
    showEdit() { return this.edit.id !== -1 }
  },
  methods: {
    startEdit(id) {
      const mapping = this.mappings.find(m => m.output === id)
      if (mapping) {
        this.edit.deviceId = mapping.deviceId
        this.edit.action = mapping.action
        this.edit.id = id
      }
    },
    cancelEdit() {
      this.edit.deviceId = ''
      this.edit.action = ''
      this.edit.id = -1
    },
    saveEdit(id) {
      this.$socket.emit('setVideohubMapping', { 
        output: id,
        deviceId: this.edit.deviceId,
        action: this.edit.action
      })
      this.edit.id = -1
    },
    deleteMapping(id) {
      this.$socket.emit('deleteVideohubMapping', { id: id })
      this.edit.id = -1
    },
    getDeviceName(deviceId) {
      const device = this.devices.find(d => d.config.id === deviceId)
      if (device) {
        return device.config.name
      }
      return ''
    },
    getDeviceAction(deviceId, action) {
      const device = this.devices.find(d => d.config.id === deviceId)
      if (device && device.params && device.params.videohubActions) {
        const item = device.params.videohubActions.find(a => a.id === action)
        return item ? item.label : action
      }
      return ''
    },
    getDeviceActions(deviceId) {
      if (deviceId === '') return []
      const device = this.devices.find(d => d.config.id === deviceId)
      if (!device || !device.params || !device.params.videohubActions) return []
      return device.params.videohubActions
    }
  }
}
</script>
