<template>
    <full-height-card>
        <template #header>
            <div class="d-flex align-items-center">
                <div class="flex-shrink">
                    <h2 class="card-title py-2">
                        <template v-if="stationName">
                            {{ stationName }}
                        </template>
                        <template v-else>
                            {{ $gettext('On-Demand Media') }}
                        </template>
                    </h2>
                </div>
                <div class="flex-fill text-end">
                    <inline-player ref="player" />
                </div>
            </div>
        </template>

        <template #default>
            <data-table
                id="public_on_demand"
                ref="datatable"
                paginated
                select-fields
                :fields="fields"
                :api-url="listUrl"
            >
                <template #cell(download_url)="row">
                    <play-button
                        class="btn-lg"
                        :url="row.item.download_url"
                    />
                    <template v-if="showDownloadButton">
                        <a
                            class="name btn btn-lg p-0 ms-2"
                            :href="row.item.download_url"
                            target="_blank"
                            :title="$gettext('Download')"
                        >
                            <icon :icon="IconDownload" />
                        </a>
                    </template>
                </template>
                <template #cell(art)="row">
                    <album-art :src="row.item.media.art" />
                </template>
                <template #cell(size)="row">
                    <template v-if="!row.item.size">
                        &nbsp;
                    </template>
                    <template v-else>
                        {{ formatFileSize(row.item.size) }}
                    </template>
                </template>
            </data-table>
        </template>
    </full-height-card>
</template>

<script setup lang="ts">
import InlinePlayer from '../InlinePlayer.vue';
import DataTable, {DataTableField} from '~/components/Common/DataTable.vue';
import {forEach} from 'lodash';
import Icon from '~/components/Common/Icon.vue';
import PlayButton from "~/components/Common/PlayButton.vue";
import {useTranslate} from "~/vendor/gettext";
import AlbumArt from "~/components/Common/AlbumArt.vue";
import {IconDownload} from "~/components/Common/icons";
import FullHeightCard from "~/components/Public/FullHeightCard.vue";

const props = defineProps({
    listUrl: {
        type: String,
        required: true
    },
    stationName: {
        type: String,
        required: true
    },
    customFields: {
        type: Array,
        default: () => {
            return [];
        }
    },
    showDownloadButton: {
        type: Boolean,
        default: false
    }
});

const {$gettext} = useTranslate();

const fields: DataTableField[] = [
    {key: 'download_url', label: ' ', class: 'shrink'},
    {key: 'art', label: $gettext('Art'), class: 'shrink'},
    {
        key: 'title',
        label: $gettext('Title'),
        sortable: true,
        selectable: true,
        formatter: (_value, _key, item) => item.media.title,
    },
    {
        key: 'artist',
        label: $gettext('Artist'),
        sortable: true,
        selectable: true,
        formatter: (_value, _key, item) => item.media.artist,
    },
    {
        key: 'album',
        label: $gettext('Album'),
        sortable: true,
        selectable: true,
        visible: false,
        formatter: (_value, _key, item) => item.media.album
    }
];

forEach(props.customFields.slice(), (field) => {
    fields.push({
        key: field.display_key,
        label: field.label,
        sortable: true,
        selectable: true,
        visible: false,
        formatter: (_value, _key, item) => item.media.custom_fields[field.key]
    });
});
</script>
