<script setup lang="ts">
import { api } from "@";
import PlayIcon from "@/components/PlayIcon.vue";
import ExternalIcon from "@/components/ExternalIcon.vue";
import LocationIcon from "@/components/LocationIcon.vue"
import TicketIcon from "@/components/TicketIcon.vue";
import VinylIcon from "@/components/VinylIcon.vue";
import InfoIcon from "@/components/InfoIcon.vue";
import Tooltip from "@/components/Tooltip.vue";
import { store } from "@";

const player = store.usePlayer();

const { stationInfo } = defineProps({
    stationInfo: api.StationInfo,
});

const status = () => {
    if (stationInfo.status === api.StationStatus.Receive) {
        return api.StationStatus.Online;
    }
    if (stationInfo.playback === api.Playback.Stopped || stationInfo.playback === api.Playback.Paused) {
        return api.StationStatus.Offline;
    }
    return stationInfo.status;
};
</script>

<template>
    <div class="flex rounded-xl m-2 bg-ctp-base">
        <div class="flex items-center justify-center">
            <div class="h-20 sm:h-36 flex rounded-l-xl aspect-square items-center justify-center bg-ctp-maroon/50">
                <VinylIcon class="p-1" />
            </div>
        </div>
        <div class="w-full flex flex-col justify-center px-4 space-y-2">
            <div class="flex h-8 sm:h-10 items-center">
                <span class="flex-grow font-bold text-ctp-peach text-xl sm:text-2xl">{{ stationInfo.name }}</span>

            </div>
            <div class="hidden sm:flex flex-col space-y-1">
                <div v-if="stationInfo.location" class="flex items-center space-x-1">
                    <LocationIcon class="text-ctp-subtext0" />
                    <span class="text-ctp-subtext0">{{ stationInfo.location }}</span>
                </div>
                <div v-if="stationInfo.genre" class="flex items-center space-x-1">
                    <TicketIcon class="text-ctp-subtext0" />
                    <span class="text-ctp-subtext0">{{ stationInfo.genre }}</span>
                </div>
            </div>
        </div>

        <div class="flex flex-col justify-center pr-4 space-y-2">
            <div class="flex items-center justify-center space-x-2">
                <button
                    class="p-1.5 sm:p-2.5 w-8 sm:w-10 inline-flex rounded-md items-center justify-center bg-ctp-mantle hover:bg-ctp-mantle/50">
                    <Tooltip :text="status()">
                        <InfoIcon class="text-ctp-peach" />
                    </Tooltip>
                </button>
                <button
                    class="p-1.5 sm:p-2.5 w-8 sm:w-10 inline-flex rounded-md items-center justify-center bg-ctp-mantle hover:bg-ctp-mantle/50">
                    <ExternalIcon class="text-ctp-peach" />
                </button>
                <button v-if="status()" @click="player.load(stationInfo, true)"
                    class="p-1.5 sm:p-2.5 w-8 sm:w-10 inline-flex rounded-md items-center justify-center bg-ctp-mantle hover:bg-ctp-mantle/50">
                    <PlayIcon class="text-ctp-peach" />
                </button>

            </div>

        </div>

    </div>
</template>
