<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="page-header-wrapper">
    <div>
      <div v-show="isEnableVoice" class="enable-voice-container">
        <span class="auto-play">{{ 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="checked-icon"></div>
          </template>
        </n-switch>
      </div>
    </div>

    <div class="page-header-right-container">
      <NButton
        v-show="isLogin"
        type="primary"
        color="#EBECFF"
        class="create-agent-btn"
        @click="handleToCreateApplication"
      >
        {{ t('common_module.create_agent_btn_text') }}
      </NButton>
      <NButton v-show="!isLogin" color="#EBECFF" class="login-btn" @click="handleToLogin">
        {{ t('common_module.login_now') }}
      </NButton>

      <div v-show="isLogin" class="logout-btn">
        <Logout theme="outline" size="15" fill="#000DFF" :stroke-width="4" @click="handleToLogout" />
      </div>
    </div>
  </header>
</template>

<style lang="scss" scoped>
.page-header-wrapper {
  @apply flex h-[58px] w-full items-center justify-between px-[20px];

  .enable-voice-container {
    @apply flex items-center gap-[8px];

    .auto-play {
      @apply text-[12px];
    }

    .checked-icon {
      @apply bg-theme-color h-full w-full rounded-full;
    }
  }

  .page-header-right-container {
    @apply flex-center gap-[10px];

    .create-agent-btn {
      @apply rounded-md! h-[28px]! text-[12px]! min-w-[80px]! text-theme-color!;
    }

    .login-btn {
      @apply rounded-md! h-[28px]! text-[12px]! min-w-[80px]! text-theme-color!;
    }

    .logout-btn {
      @apply flex-center h-[28px] w-[28px] rounded-[5px] bg-[#EBECFF];
    }
  }
}
</style>
