<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import CustomIcon from '@/components/custom-icon/custom-icon.vue'
import { useUserStore } from '@/store/modules/user'
import { PersonalAppConfigState } from '@/store/types/personal-app-config'
import { formatDateTime } from '@/utils/date-formatter'
import { UserInfo } from '@/store/types/user'

interface Props {
  agentApplicationConfig: PersonalAppConfigState
  agentMemberInfo: UserInfo
}

const { t } = useI18n()

defineProps<Props>()

const emit = defineEmits<{
  back: []
  toCreateApplication: []
  toLogin: []
}>()

const userStore = useUserStore()

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

function handleBack() {
  emit('back')
}

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

function handleToLogin() {
  emit('toLogin')
}
</script>

<template>
  <header class="flex h-[68px] w-full items-center justify-between border-b border-[#e8e9eb] bg-white px-5">
    <div class="flex items-center">
      <CustomIcon
        icon="weui:back-outlined"
        class="hover:text-theme-color mr-5 cursor-pointer outline-none"
        @click="handleBack"
      />
      <img :src="agentApplicationConfig.baseInfo.agentAvatar" class="mr-5 h-10 w-10 rounded-md object-cover" />

      <div class="flex flex-col items-start justify-center">
        <span class="mb-1 line-clamp-1 max-w-[200px] break-all">{{ agentApplicationConfig.baseInfo.agentTitle }}</span>
        <div class="flex items-center text-xs text-[#84868c]">
          <img v-show="isLogin" :src="agentMemberInfo.avatarUrl" class="mr-2 h-5 w-5 rounded-full" />
          <n-ellipsis v-show="isLogin" class="max-w-[120px]! mr-4">
            <span class="select-none">{{ agentMemberInfo.nickName }}</span>
          </n-ellipsis>
          <span>
            {{ t('common_module.publish_time_in') }}
            {{ formatDateTime(agentApplicationConfig.modifiedTime) }}
          </span>
        </div>
      </div>
    </div>

    <div>
      <NButton
        v-show="isLogin"
        type="primary"
        class="rounded-md! h-[32px]! min-w-[100px]!"
        @click="handleToCreateApplication"
      >
        {{ t('common_module.create_agent_btn_text') }}
      </NButton>
      <NButton v-show="!isLogin" type="primary" class="rounded-md! h-[32px]! min-w-[100px]!" @click="handleToLogin">
        {{ t('common_module.login_now') }}
      </NButton>
    </div>
  </header>
</template>
