<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { computed } from 'vue'

import { type Track, type User } from '~/types'

import OptionsButton from '~/components/ui/button/Options.vue'
import PlayButton from '~/components/ui/button/Play.vue'


const { t } = useI18n()

const emit = defineEmits<{ play: [track: Track] }>()

const { track, user } = defineProps<{ track: Track, user: User }>()

const artist_credit = track.artist_credit || []
const firstArtist = artist_credit.length > 0 ? artist_credit[0].artist : null

const profileParams = computed(() => {
  const [username, domain] = user.full_username.split('@')
  return { username, domain }
})

let navigate = (to: 'track' | 'artist' | 'user') => { }

if (import.meta.env.PROD) {
  const router = useRouter()
  navigate = (to: 'track' | 'artist' | 'user') => to === 'track'
    ? router.push({ name: 'library.tracks.detail', params: { id: track.id } })
    : to === 'artist'
      ? router.push({ name: 'library.artists.detail', params: { id: firstArtist?.id } /* TODO: Multi-Artist! */ })
      : router.push({ name: 'profile.full', params: profileParams.value })
}
</script>

<template>
  <div class="funkwhale activity" @click="navigate('track')">
    <div class="activity-image">
      <img :src="track.cover?.urls.original" />
      <PlayButton @play="emit('play', track)" :round="false" :shadow="false" />
    </div>
    <div class="activity-content">
      <div class="track-title">{{ track.title }}</div>
      <a @click.stop="navigate('artist')" class="funkwhale link artist">
        {{ firstArtist?.name /* TODO: Multi-Artist! */ }}
      </a>
      <a @click.stop="navigate('user')" class="funkwhale link user">
        {{ t('vui.by-user', { username: user.username }) }}
      </a>
    </div>
    <div>
      <OptionsButton />
    </div>
  </div>
</template>

<style lang="scss">
@import './activity.scss'
</style>
