<template>
  <div class="visitor-auth">
    <el-divider content-position="left">{{ t('visitorAuth.title') }}</el-divider>
    <el-form-item :label="t('visitorAuth.enable')">
      <el-switch v-model="enabled" />
    </el-form-item>
    <template v-if="enabled">
      <el-form-item :label="t('visitorAuth.allowVisitors')">
        <el-radio-group v-model="bindMode">
          <el-radio value="all">{{ t('visitorAuth.allVisitors') }}</el-radio>
          <el-radio value="selected">{{ t('visitorAuth.selectedVisitors') }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="bindMode === 'selected'" :label="t('visitorAuth.selectVisitors')">
        <el-select v-model="visitorIds" multiple filterable :placeholder="t('visitorAuth.selectVisitors')">
          <el-option v-for="v in visitors" :key="v.id" :label="v.username" :value="v.id" />
        </el-select>
      </el-form-item>
      <el-form-item :label="t('visitorAuth.ttl')">
        <el-input-number v-model="ttlSeconds" :min="300" :max="604800" :step="3600" class="w-full" />
        <div class="form-hint">{{ t('visitorAuth.ttlHint') }}</div>
      </el-form-item>
      <el-alert
        v-if="tunnelHint"
        type="info"
        :closable="false"
        show-icon
        :title="t('visitorAuth.tunnelHint')"
        class="u-mb-4"
      />
    </template>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const props = defineProps({
  visitorAuthEnabled: Boolean,
  visitorBindMode: { type: String, default: 'all' },
  visitorTtlSeconds: { type: Number, default: 7200 },
  visitorIds: { type: Array, default: () => [] },
  visitors: { type: Array, default: () => [] },
  tunnelHint: Boolean,
})

const emit = defineEmits([
  'update:visitorAuthEnabled',
  'update:visitorBindMode',
  'update:visitorTtlSeconds',
  'update:visitorIds',
])

const enabled = computed({
  get: () => props.visitorAuthEnabled,
  set: (v) => emit('update:visitorAuthEnabled', v),
})
const bindMode = computed({
  get: () => props.visitorBindMode || 'all',
  set: (v) => emit('update:visitorBindMode', v),
})
const ttlSeconds = computed({
  get: () => props.visitorTtlSeconds || 7200,
  set: (v) => emit('update:visitorTtlSeconds', v),
})
const visitorIds = computed({
  get: () => props.visitorIds || [],
  set: (v) => emit('update:visitorIds', v),
})
</script>
