<script setup lang="ts">
import { ref, watch } from 'vue'
import type { HelpScreenData, Option } from '@/lib/types'
import OptionsListHeader from './OptionsListHeader.vue'
import CompanyCard from './CompanyCard.vue'
import HelpscreenIntro from './HelpscreenIntro.vue'
import HelpscreenList from './HelpscreenList.vue'
import PoweredBy from '@/ui/PoweredBy.vue'

const props = withDefaults(
  defineProps<{
    helpScreen: HelpScreenData | null
    hasActiveSession?: boolean
  }>(),
  { hasActiveSession: false }
)

const emit = defineEmits<{
  startChat: [option: Option]
  minimize: []
}>()

const selectedOption = ref<Option | null>(null)

watch(() => props.helpScreen?.id, () => { selectedOption.value = null })

function handleToggleOption(option: Option) {
  selectedOption.value = selectedOption.value?.id === option.id ? null : option
}

function handleStartChat() {
  if (selectedOption.value) emit('startChat', selectedOption.value)
}
</script>

<template>
  <div class="babylai:flex babylai:flex-col babylai:max-h-full">
    <OptionsListHeader @minimize="$emit('minimize')" />
    <div class="babylai:flex babylai:flex-col babylai:flex-1 babylai:overflow-y-auto babylai:px-6 babylai:pt-6 babylai:pb-4 babylai:gap-6">
      <HelpscreenIntro :title="helpScreen?.title" />
      <CompanyCard
        :logo-url="helpScreen?.tenant?.logoUrl"
        :name="helpScreen?.tenant?.name"
        :description="helpScreen?.tenant?.settings?.description"
        :title="helpScreen?.title"
      />
      <HelpscreenList
        :options="helpScreen?.options"
        :selected-option="selectedOption"
        :show-chat-now-button="!hasActiveSession"
        :chat-with-us="helpScreen?.chatWithUs ?? true"
        @toggle-option="handleToggleOption"
        @start-chat="handleStartChat"
      />
    </div>
    <PoweredBy />
  </div>
</template>
