<template>
  <section class="live-settings-card">
    <div class="live-settings-head">
      <h3>{{ t('labels.liveModeVisibility') }}</h3>
    </div>

    <div class="live-settings-row">
      <label class="control-label">{{ t('labels.activeLiveView') }}</label>
      <select class="name-input" :value="liveSettings.activeView" @change="emitPatch({ activeView: $event.target.value })">
        <option value="group_live">{{ t('labels.liveViewGroup') }}</option>
        <option value="prelim_tie">{{ t('labels.liveViewPrelimTie') }}</option>
        <option value="prelim_overall">{{ t('labels.liveViewPrelimOverall') }}</option>
        <option value="final_groups">{{ t('labels.liveViewFinalGroups') }}</option>
        <option value="final_tie">{{ t('labels.liveViewFinalTie') }}</option>
        <option value="podium">{{ t('labels.liveViewPodium') }}</option>
      </select>
    </div>

    <div class="live-settings-row">
      <label class="control-label">{{ t('labels.groupDisplayMode') }}</label>
      <div class="inline-settings">
        <select class="name-input" :value="liveSettings.groupDisplayMode" @change="emitPatch({ groupDisplayMode: $event.target.value })">
          <option value="rotate">{{ t('actions.liveModeRotate') }}</option>
          <option value="fixed">{{ t('actions.liveModeFixed') }}</option>
        </select>
        <select
          v-if="liveSettings.groupDisplayMode === 'fixed'"
          class="name-input"
          :value="liveSettings.groupFixedCode || ''"
          @change="emitPatch({ groupFixedCode: $event.target.value })"
        >
          <option value="">{{ t('labels.unassigned') }}</option>
          <option v-for="group in assignableGroups" :key="'live-fixed-group-' + group" :value="group">{{ group }}</option>
        </select>
      </div>
    </div>

    <div class="live-settings-row">
      <label class="control-label">{{ t('labels.finalDisplayMode') }}</label>
      <div class="inline-settings">
        <select class="name-input" :value="liveSettings.finalDisplayMode" @change="emitPatch({ finalDisplayMode: $event.target.value })">
          <option value="rotate">{{ t('actions.liveModeRotate') }}</option>
          <option value="fixed">{{ t('actions.liveModeFixed') }}</option>
        </select>
        <select
          v-if="liveSettings.finalDisplayMode === 'fixed'"
          class="name-input"
          :value="String(liveSettings.finalFixedGroup || 1)"
          @change="emitPatch({ finalFixedGroup: Number($event.target.value) || 1 })"
        >
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
      </div>
    </div>

    <div class="live-settings-row">
      <label class="control-label">{{ t('labels.rotationIntervalSec') }}</label>
      <input
        class="name-input"
        type="number"
        min="3"
        max="30"
        :value="liveSettings.rotationIntervalSec || 5"
        @change="emitPatch({ rotationIntervalSec: Number($event.target.value) || 5 })"
      />
    </div>

    <div class="live-settings-row">
      <label class="control-label">{{ t('labels.rotationPlayerCount') }}</label>
      <input
        class="name-input"
        type="number"
        min="3"
        max="40"
        :value="liveSettings.rotationPlayerCount || 12"
        @change="emitPatch({ rotationPlayerCount: Number($event.target.value) || 12 })"
      />
    </div>
  </section>
</template>

<script setup>
const props = defineProps({
  t: { type: Function, required: true },
  liveSettings: { type: Object, required: true },
  assignableGroups: { type: Array, required: true },
})

const emit = defineEmits(['update-live-setting'])

function emitPatch(patch) {
  emit('update-live-setting', patch)
}
</script>
