<script setup lang="ts">
import { useUserStore } from '@/store/modules/user'
import { computed, CSSProperties } from 'vue'
import { useI18n } from 'vue-i18n'
import { Logout } from '@icon-park/vue-next'

interface Props {
  agentTitle: string
}

const { t } = useI18n()

defineProps<Props>()

const emit = defineEmits<{
  toCreateApplication: []
  toLogin: []
  toLogout: []
  updateAutoPlaying: [value: boolean]
}>()

const userStore = useUserStore()

const isEnableVoice = defineModel<boolean>('isEnableVoice', { required: true })
const answerAudioAutoPlay = defineModel<boolean>('answerAudioAutoPlay', { required: true })

const railStyle = ({ focused, checked }: { focused: boolean; checked: boolean }) => {
  const style: CSSProperties = {}
  if (checked) {
    style.background = '#CFD1FF'
  } else {
    if (focused) {
      style.boxShadow = '0 0 0 2px #ddd'
    }
  }
  return style
}

const isLogin = computed(() => {
  return userStore.isLogin
})

function handleToCreateApplication() {
  emit('toCreateApplication')
}

function handleToLogin() {
  emit('toLogin')
}

function handleToLogout() {
  emit('toLogout')
}
</script>

<template>
  <header class="flex h-[58px] w-full items-center justify-between px-[20px]">
    <div>
      <div v-show="isEnableVoice" class="flex items-center gap-2">
        <span class="text-[12px]">{{ t('common_module.voice_auto_play') }}</span>
        <n-switch
          v-model:value="answerAudioAutoPlay"
          size="small"
          :rail-style="railStyle"
          @update:value="(isAutoPlay: boolean) => emit('updateAutoPlaying', isAutoPlay)"
        >
          <template #checked> {{ t('common_module.open') }} </template>
          <template #unchecked> {{ t('common_module.close') }} </template>
          <template #checked-icon>
            <div class="bg-theme-color h-full w-full rounded-full"></div>
          </template>
        </n-switch>
      </div>
    </div>

    <div class="flex-center gap-[10px]">
      <NButton
        v-show="isLogin"
        type="primary"
        color="#EBECFF"
        class="rounded-md! h-[28px]! text-[12px]! min-w-[80px]! text-theme-color!"
        @click="handleToCreateApplication"
      >
        {{ t('common_module.create_agent_btn_text') }}
      </NButton>
      <NButton
        v-show="!isLogin"
        color="#EBECFF"
        class="rounded-md! h-[28]! text-[12px]! min-w-[80px]! text-theme-color!"
        @click="handleToLogin"
      >
        <span class="text-xs"> {{ t('common_module.login_now') }}</span>
      </NButton>

      <div v-show="isLogin" class="flex-center h-[28px] w-[28px] rounded-[5px] bg-[#EBECFF]">
        <Logout theme="outline" size="15" fill="#000DFF" :stroke-width="4" @click="handleToLogout" />
      </div>
    </div>
  </header>
</template>
