<script lang="ts" setup>
import { PropType, toRefs } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'

export interface AuthConfig {
  verification: string
  username: string
  password: string
}

const props = defineProps({
  request: {
    type: Object as PropType<{ authManager: AuthConfig }>,
    default: () => ({})
  }
})
const { t } = useI18n()

const { request } = toRefs(props)

const options = [{ name: 'No Auth' }, { name: 'Basic Auth' }]
const change = () => {
  const { username, password, verification } = request.value.authManager
  const isBasic = verification === 'Basic Auth'
  request.value.authManager.username = isBasic ? username : ''
  request.value.authManager.password = isBasic ? password : ''
}
</script>

<template>
  <el-form label-position="top">
    <el-form-item class="api-auth-config" :label="t('datasource.verification_method')">
      <el-select
        style="width: 100%"
        v-model="request.authManager.verification"
        @change="change"
        :placeholder="t('datasource.verification_method')"
      >
        <el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.name" />
      </el-select>
    </el-form-item>
    <el-row :gutter="16">
      <el-col :span="12">
        <el-form-item
          v-if="request.authManager.verification === 'Basic Auth'"
          :label="t('datasource.username')"
        >
          <el-input
            v-model="request.authManager.username"
            :placeholder="t('datasource.username')"
            class="ms-http-input"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          v-if="request.authManager.verification === 'Basic Auth'"
          :label="t('datasource.password')"
        >
          <el-input
            v-model="request.authManager.password"
            type="password"
            :placeholder="t('datasource.password')"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<style lang="less">
.api-auth-config {
  margin-bottom: 16px !important;
}
</style>
