<script>
export default {
	data() {
		return {
			otherItems: [],
			perElementPdfLinksVisible: false,
		};
	},
	computed: {
		hasElementPdfLinks() {
			if (!this.$store.manifest.structures?.[0]?.rendering) {
				return false;
			}

			const renderings = this.$store.manifest.structures[0].rendering;

			return renderings.some((rendering) => rendering.format && rendering.format === 'application/pdf');
		},
		media() {
			const media = [];

			this.$store.options.pages.filter((page) => page > 0).forEach((page) => {
				const items = this.$store.manifest.items[page - 1].items?.[0]?.items;

				items?.forEach((item, itemIndex) => {
					const resources = item.body?.items || [item.body];

					resources.forEach((resource, layerIndex) => {
						const format = resource.format?.split('/')[1]; // e.g. image/jpeg -> jpeg

						const medium = {
							fileName: resource.id.split('/').at(-1),
							format: format?.toUpperCase(),
							label: resource.label,
							type: resource.type,
							url: resource.id,
							page,
							itemIndex,
							layerIndex,
						};

						if (resource.service) {
							const service = [].concat(resource.service)[0];
							const quality = ['ImageService2', 'ImageService3'].includes(service.type || service['@type'])
								? 'default'
								: 'native';
							const size = service.type === 'ImageService3'
								? 'max'
								: 'full';
							const id = service.id || service['@id'];

							const slash = id.at(-1) === '/' ? '' : '/';
							medium.url = `${id}${slash}full/${size}/0/${quality}.${format === 'jpeg' ? 'jpg' : format}`;
						}

						media.push(medium);
					});
				});
			});

			return media;
		},
		pages() {
			return this.$store.options.pages.filter((page) => page > 0);
		},
		renderings() {
			return [].concat(this.$store.manifest.rendering || []);
		},
	},
};
</script>

<template>
	<section
		class="tify-export"
		tabindex="0"
	>
		<h2 class="tify-sr-only">
			{{ $translate('Export [noun]') }}
		</h2>

		<div
			v-if="$store.manifest"
			class="tify-export-section -links"
		>
			<h3>{{ $translate('Media Files') }}</h3>
			<ul class="tify-export-list">
				<li
					v-for="medium in media"
					:key="medium.url"
				>
					<!-- NOTE: The download attribute is only honored for same-origin URLs -->
					<a
						:href="medium.url"
						class="tify-export-link"
						download
						rel="noopener noreferrer"
						target="_blank"
					>
						<span class="tify-export-link-media">
							<img
								v-if="$store.getThumbnailUrl(medium.page, 96, medium.itemIndex, medium.layerIndex)"
								:src="$store.getThumbnailUrl(medium.page, 96, medium.itemIndex, medium.layerIndex)"
								alt=""
							>
							<IconWaveform v-else-if="medium.type === 'Sound'" />
							<IconFilmstrip v-else-if="medium.type === 'Video'" />
						</span>

						<span class="tify-export-link-text">
							<PageName
								:number="medium.page"
								:wrap="true"
							/>
							<span
								v-if="medium.label"
								class="tify-export-link-hint"
							>
								{{ $store.localize(medium.label) }}
							</span>
							<span class="tify-export-link-format">
								<template v-if="medium.type === 'Sound'">
									{{ $translate('Audio') }} &middot;
								</template>
								<template v-else-if="medium.type === 'Video'">
									{{ $translate('Video') }} &middot;
								</template>
								<template v-else-if="medium.type === 'Image'">
									{{ $translate('Image') }} &middot;
								</template>
								{{ medium.format }}
							</span>
						</span>
					</a>
				</li>
			</ul>
		</div>

		<div
			v-if="$store.manifest?.rendering"
			class="tify-export-section -renderings"
		>
			<h3>{{ $translate('Renderings') }}</h3>
			<ul class="tify-list">
				<li
					v-for="item in renderings"
					:key="item.id"
				>
					<a :href="item.id">{{ $store.localize(item.label) }}</a>
				</li>
			</ul>

			<div
				v-if="hasElementPdfLinks"
				class="tify-export-container"
			>
				<button
					type="button"
					class="tify-export-toggle"
					:class="{ '-close': perElementPdfLinksVisible }"
					:aria-controls="$getId('export-pdf-list')"
					:aria-expanded="perElementPdfLinksVisible"
					:aria-label="perElementPdfLinksVisible ? $translate('Close PDF list') : null"
					@click="perElementPdfLinksVisible = !perElementPdfLinksVisible"
				>
					<template v-if="!perElementPdfLinksVisible">
						{{ $translate('PDFs for each element') }}
					</template>
					<template v-else>
						<IconClose />
					</template>
				</button>
				<div
					v-show="perElementPdfLinksVisible"
					:id="$getId('export-pdf-list')"
					class="tify-export-toc"
				>
					<h4>{{ $translate('PDFs for each element') }}</h4>
					<TocList
						ref="children"
						purpose="pdf"
						:level="0"
						:structures="$store.structures"
					/>
				</div>
			</div>
		</div>

		<div class="tify-export-section -iiif">
			<h3>IIIF</h3>
			<ul class="tify-list">
				<li v-if="$store.options.childManifestUrl">
					<a
						:href="$store.options.childManifestUrl"
						download="manifest.json"
					>
						{{ $translate('IIIF manifest (current document)') }}
					</a>
				</li>
				<li>
					<a
						:href="$store.options.manifestUrl"
						download="manifest.json"
					>
						{{ $translate($store.collection ? 'IIIF manifest (collection)' : 'IIIF manifest') }}
					</a>
				</li>
			</ul>
		</div>

		<div
			v-if="$store.manifest?.seeAlso?.length"
			class="tify-export-section -other"
		>
			<h3>{{ $translate('Other Formats') }}</h3>
			<ul class="tify-list">
				<li
					v-for="item in $store.manifest.seeAlso"
					:key="item.id"
				>
					<a
						:href="item.id"
						download
					>
						{{ item.label ? $store.localize(item.label) : item.id }}
					</a>
				</li>
			</ul>
		</div>
	</section>
</template>
