<script setup lang="ts">
import HomeHeroMasthead from './HomeHeroMasthead.vue'
import HomeHeroStatsBand from './HomeHeroStatsBand.vue'
import HomeHeroStreamBand from './HomeHeroStreamBand.vue'
import HomeTopNav from './HomeTopNav.vue'

interface HomeSocialLink {
  label: string
  platform: string
  icon: string
  url: string
}

interface HomeSiteContent {
  hostDisplayName: string
  hostTagline: string
  hostArtistName: string
  hostImageUrl: string
}

defineProps<{
  isGuest: boolean
  isUser: boolean
  isAdmin: boolean
  twitchUser: string
  siteContent: HomeSiteContent
  hostSocialLinks: HomeSocialLink[]
  categoryIntroText: string
  phaseCardTitle: string
  phaseStatusStyle: string
  phaseStatusLabel: string
  phaseCardDescription: string
  phaseCardRange: string
  showCountdown: boolean
  publicStreamUrl: string
  showPhase: boolean
  phasePrimaryLabel: string
  phasePrimaryDisabled: boolean
  phasePrimaryActionStyle: string
  streamEyebrow: string
  streamTitle: string
  streamText: string
  streamMeta: string
  streamLive: boolean
  streamLocked: boolean
  streamButtonLabel: string
  streamButtonUrl: string
  streamLockedTitle: string
  statOneValue: string
  statOneLabel: string
  statTwoValue: string
  statThreeValue: string
  statThreeLabel: string
  onLogin: () => void
  onOpenAccount: () => void
  openAdminPanel: (event?: Event) => void
  onPrimaryPhaseAction: (event?: Event) => void
  isUploadedSocialIcon: (icon: string | null | undefined) => boolean
  socialSimpleIconPath: (platform: string | null | undefined) => string
  socialSimpleIconColor: (platform: string | null | undefined) => string
  platformKey: (platform: string | null | undefined) => string
}>()
</script>

<template>
  <HomeTopNav
    :is-guest="isGuest"
    :is-user="isUser"
    :is-admin="isAdmin"
    :twitch-user="twitchUser"
    :on-login="onLogin"
    :on-open-account="onOpenAccount"
    :open-admin-panel="openAdminPanel"
  />

  <HomeHeroMasthead
    :site-content="siteContent"
    :host-social-links="hostSocialLinks"
    :category-intro-text="categoryIntroText"
    :phase-card-title="phaseCardTitle"
    :phase-status-style="phaseStatusStyle"
    :phase-status-label="phaseStatusLabel"
    :phase-card-description="phaseCardDescription"
    :phase-card-range="phaseCardRange"
    :show-countdown="showCountdown"
    :public-stream-url="publicStreamUrl"
    :show-phase="showPhase"
    :phase-primary-label="phasePrimaryLabel"
    :phase-primary-disabled="phasePrimaryDisabled"
    :phase-primary-action-style="phasePrimaryActionStyle"
    :on-primary-phase-action="onPrimaryPhaseAction"
    :is-uploaded-social-icon="isUploadedSocialIcon"
    :social-simple-icon-path="socialSimpleIconPath"
    :social-simple-icon-color="socialSimpleIconColor"
    :platform-key="platformKey"
  />

  <HomeHeroStreamBand
    :public-stream-url="publicStreamUrl"
    :stream-eyebrow="streamEyebrow"
    :stream-title="streamTitle"
    :stream-text="streamText"
    :stream-meta="streamMeta"
    :stream-live="streamLive"
    :stream-locked="streamLocked"
    :stream-button-label="streamButtonLabel"
    :stream-button-url="streamButtonUrl"
    :stream-locked-title="streamLockedTitle"
  />

  <HomeHeroStatsBand
    :stat-one-value="statOneValue"
    :stat-one-label="statOneLabel"
    :stat-two-value="statTwoValue"
    :stat-three-value="statThreeValue"
    :stat-three-label="statThreeLabel"
  />
</template>
