<script setup lang="tsx">
/** @jsxImportSource vue */
import { Cursor, Ticker, useCursorState } from 'motion-plus-vue'
import { motion } from 'motion-v'
import { computed, defineComponent } from 'vue'

const TickerImage = defineComponent({
  props: {
    src: String,
    zone: String,
  },
  setup(props) {
    return () => (
      <motion.img
        data-cursor-zone={props.zone}
        src={props.src}
        style={{
          width: 300 * 0.75 + 'px',
          height: 400 * 0.75 + 'px',
          borderRadius: 10,
          border: '1px solid #1d2628',
        }}
      />
    )
  },
})

function getCursorContent(zone: string | null) {
  switch (zone) {
    case 'japan-day':
      return { emojis: '🍜 🏯 🚅 🇯🇵', label: 'Tokyo' }
    case 'prague':
      return { emojis: '🏰 🍺 🌉 🇨🇿', label: 'Prague' }
    case 'london-night':
      return { emojis: '💷 👑 ☕️ 🇬🇧', label: 'London' }
    default:
      return undefined
  }
}
const cursorState = useCursorState()
const content = computed(() => getCursorContent(cursorState.value.zone))
</script>

<template>
  <nav class="container">
    <TickerImage src="/photos/japan-day/4.jpg" zone="japan-day" />
    <TickerImage src="/photos/prague/1.jpg" zone="prague" />
    <TickerImage src="/photos/london-night/1.jpg" zone="london-night" />
      <Cursor
        v-if="content"
        :variants="{
          initial: { scale: 0 },
          default: { scale: 1 },
          exit: { scale: 0 },
        }"
        :style="{
          display: 'flex',
          flexDirection: 'column',
          width: 100,
          height: 100,
          borderRadius: 60,
          overflow: 'hidden',
          border: '10px solid #0f1115',
          backgroundColor: '#0f1115',
          color: '#f5f5f5',
          textTransform: 'uppercase',
          fontSize: 20,
          lineHeight: 1,
        }"
      >
        <Ticker
          key="ticker-1"
          :velocity="50"
          :style="{ height: '20px' }"
        >
          {{ content?.label }}
          •
        </Ticker>
        <Ticker
          key="ticker-2"
          :velocity="-50"
          :style="{ height: '20px' }"
        >
          {{ content?.emojis }}
        </Ticker>
        <Ticker
          key="ticker-3"
          :velocity="50"
          :style="{ height: '20px' }"
        >
          {{ content?.label }}
          •
        </Ticker>
        <Ticker
          key="ticker-4"
          :velocity="-50"
          :style="{ height: '20px' }"
        >
          {{ content?.emojis }}
        </Ticker>
        <Ticker
          key="ticker-5"
          :velocity="50"
          :style="{ height: '20px' }"
        >
          {{ content?.label }}
          •
        </Ticker>
      </Cursor>
  </nav>
</template>

<style scoped>
.container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
</style>