<template>
  <div>
    <PrimeDivider align="left">
      Audio
    </PrimeDivider>

    <PrimeFloatLabel variant="on">
      <PrimeSelect
        v-model="inputDeviceId"
        :options="audioInputs"
        option-label="label"
        option-value="deviceId"
        input-id="inputDevice"
        placeholder="No input device"
        fluid
        :invalid="!inputDeviceExist"
      />
      <label for="inputDevice">Input device</label>
    </PrimeFloatLabel>

    <div class="flex items-center gap-2 mt-3">
      <PrimeToggleSwitch v-model="autoGainControl" input-id="autoGainControl" />
      <label for="autoGainControl">Auto Gain Control</label>
    </div>

    <div class="flex items-center gap-2 mt-3">
      <PrimeToggleSwitch v-model="echoCancellation" input-id="echoCancellation" />
      <label for="echoCancellation">Echo Cancellation</label>
    </div>

    <div class="flex items-center gap-2 mt-3">
      <PrimeToggleSwitch v-model="noiseSuppression" input-id="noiseSuppression" />
      <label for="noiseSuppression">Noise Suppression</label>
    </div>

    <!--    <PrimeFloatLabel variant="on"> -->
    <!--      <PrimeSelect -->
    <!--        v-model="outputDeviceId" -->
    <!--        :options="audioOutputs" -->
    <!--        option-label="label" -->
    <!--        option-value="deviceId" -->
    <!--        fluid -->
    <!--        class="mt-6" -->
    <!--        input-id="outputDevice" -->
    <!--        :invalid="!outputDeviceExist" -->
    <!--        -->
    <!--      /> -->
    <!--      <label for="outputDevice">Output device</label> -->
    <!--    </PrimeFloatLabel> -->

    <PrimeDivider align="left">
      Video
    </PrimeDivider>

    <PrimeFloatLabel variant="on">
      <PrimeSelect
        v-model="videoDeviceId"
        :options="videoInputs"
        option-label="label"
        option-value="deviceId"
        input-id="videoDevice"
        placeholder="No video device"
        fluid
        :invalid="!videoDeviceExist"
      />
      <label for="inputDevice">Input device</label>
    </PrimeFloatLabel>

    <PrimeDivider align="left">
      Screen sharing
    </PrimeDivider>

    <div>
      <p class="text-sm mb-2 text-center">
        FPS
      </p>
      <PrimeSelectButton
        v-model="shareFps"
        :options="shareFpsOptions"
        fluid
        size="small"
        option-label="label"
        option-value="value"
      />
    </div>

    <template v-if="isTauri">
      <PrimeDivider align="left">
        Hotkeys
      </PrimeDivider>

      <PrimeFloatLabel variant="on">
        <PrimeInputText id="microphoneToggle" :model-value="toggleInputHotkey" fluid @keydown="setupToggleInputHotkey" />
        <label for="microphoneToggle">Toggle microphone</label>
      </PrimeFloatLabel>

      <PrimeFloatLabel variant="on" class="mt-3">
        <PrimeInputText id="soundToggle" :model-value="toggleOutputHotkey" fluid @keydown="setupToggleOutputHotkey" />
        <label for="soundToggle">Toggle sound</label>
      </PrimeFloatLabel>
    </template>

    <PrimeDivider align="left">
      About
    </PrimeDivider>

    <p v-if="version" class="text-muted-color text-sm">
      VERSION: {{ version }}
    </p>
    <p class="text-muted-color text-sm mt-2">
      COMMIT_SHA: {{ commitSha }}
    </p>

    <template v-if="isTauri">
      <PrimeButton
        v-if="lastUpdate"
        class="mt-3"
        size="small"
        label="Install new version"
        fluid
        severity="success"
        @click="navigateTo({ name: 'Updater' })"
      />
      <PrimeButton
        v-else
        class="mt-3"
        size="small"
        label="Check for Updates"
        fluid
        severity="info"
        :loading="checking"
        @click="checkForUpdates"
      />
    </template>
  </div>
</template>

<script setup lang="ts">
import type { RemovableRef } from '@vueuse/core'

definePageMeta({
  name: 'Preferences',
})
const { isTauri, version, commitSha } = useApp()
const { checking, checkForUpdates, lastUpdate } = useUpdater()
const { audioInputs, audioOutputs, videoInputs } = useDevices()
const {
  inputDeviceId,
  outputDeviceId,
  videoDeviceId,
  autoGainControl,
  noiseSuppression,
  echoCancellation,
  toggleInputHotkey,
  toggleOutputHotkey,
  inputDeviceExist,
  outputDeviceExist,
  videoDeviceExist,
  shareFps,
} = usePreferences()

const shareFpsOptions = [5, 30, 60].map((value) => {
  return {
    label: value.toString(),
    value,
  }
})

const setupToggleInputHotkey = (event: KeyboardEvent) => setupHotkey(event, toggleInputHotkey)
const setupToggleOutputHotkey = (event: KeyboardEvent) => setupHotkey(event, toggleOutputHotkey)

function setupHotkey(event: KeyboardEvent, model: RemovableRef<string>) {
  if (event.key === 'Tab' || event.key === 'Enter') {
    return
  }

  event.preventDefault()

  const hotkey = []

  if (event.ctrlKey || event.metaKey)
    hotkey.push('CommandOrControl')
  if (event.altKey)
    hotkey.push('Alt')
  if (event.shiftKey)
    hotkey.push('Shift')

  const modifierApplied = hotkey.length > 0

  if (!modifierApplied && ['Escape', 'Backspace', 'Delete'].includes(event.key)) {
    model.value = ''

    return
  }

  if (!['Control', 'Shift', 'Alt'].includes(event.key)) {
    hotkey.push(event.key.toUpperCase())
  }

  if (modifierApplied && hotkey.length === 1) {
    model.value = ''

    return
  }

  model.value = hotkey.join('+')
}
</script>
