<template>
	<div
		v-if="restriction"
		class="restricted"
	>
		<div>Traxxx is restricted in your region</div>
		<a
			href="/sfw"
			class="link"
		>Learn more</a>
	</div>

	<iframe
		v-else-if="campaign?.banner?.type === 'html'"
		ref="iframe"
		:width="campaign.banner.width"
		:height="campaign.banner.height"
		:src="bannerSrc"
		scrolling="no"
		marginwidth="0"
		marginheight="0"
		class="campaign frame"
		data-umami-event="campaign-click"
		:data-umami-event-campaign-id="`${campaign.entity.slug}-${campaign.id}`"
	/>

	<a
		v-else-if="campaign.banner"
		:href="campaign.url || campaign.affiliate?.url"
		target="_blank"
		class="campaign"
		data-umami-event="campaign-click"
		:data-umami-event-campaign-id="`${campaign.entity.slug}-${campaign.id}`"
	>
		<img
			:src="bannerSrc"
			:width="campaign.banner.width"
			:height="campaign.banner.height"
			class="campaign-banner"
		>
	</a>
</template>

<script setup>
import { inject } from 'vue';

const pageContext = inject('pageContext');
const { restriction } = pageContext;

const props = defineProps({
	campaign: {
		type: Object,
		default: null,
	},
});

// console.log(props.campaign);

const bannerSrc = (() => {
	if (props.campaign.banner) {
		if (props.campaign.banner.entity.type === 'network' || !props.campaign.banner.entity.parent) {
			return `/banners/${props.campaign.banner.entity.slug}/${props.campaign.banner.id}.${props.campaign.banner.type || 'jpg'}`;
		}

		if (props.campaign.banner.entity.type === 'channel' && props.campaign.banner.entity.parent?.type === 'network') {
			return `/banners/${props.campaign.banner.entity.parent.slug}/${props.campaign.banner.entity.slug}/${props.campaign.banner.id}.${props.campaign.banner.type || 'jpg'}`;
		}
	}

	return null;
})();
</script>

<style scoped>
.campaign {
	height: 100%;
	display: flex;
	justify-content: center;
	/* align-items: center; */
}

.frame {
	border: none;
	overflow: hidden;
}

.campaign-banner {
	height: auto;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.restricted {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	font-weight: bold;
	padding: .5rem;
}
</style>
