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

const props = defineProps({
	campaign: {
		type: Object,
		default: null,
	},
	backdrop: {
		type: Boolean,
		default: false,
	},
});
const pageContext = inject('pageContext');
const { restriction } = pageContext;

// console.log(props.campaign);

const bannerSrc = (() => {
	if (props.campaign.banner) {
		// if (props.campaign.banner.entity.type === 'network' || props.campaign.banner.entity.isIndependent || !props.campaign.banner.entity.parent) {
		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>

<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'"
		: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"
		:style="{ 'background-image': backdrop && `url(${bannerSrc})` }"
		:class="{ backdrop }"
		data-umami-event="campaign-click"
		:data-umami-event-campaign-id="`${campaign.entity.slug}-${campaign.id}`"
	>
		<div class="campaign-overlay">
			<img
				:src="bannerSrc"
				:width="campaign.banner.width"
				:height="campaign.banner.height"
				class="campaign-banner"
			>
		</div>
	</a>
</template>

<style scoped>
.campaign {
	height: 100%;
	display: flex;
	justify-content: center;
	border-radius: .25rem;
	overflow: hidden;
	background-size: cover;
	background-position: center;
}

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

.campaign-overlay {
	width: 100%;
	height: 100%;
	display: flex;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
}

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

.backdrop {
	.campaign-overlay {
		padding: 4px; /* margin for drop shadow */
		backdrop-filter: blur(1rem) saturate(70%) brightness(125%);
	}

	.dark .campaign-overlay {
		backdrop-filter: blur(1rem) saturate(70%) brightness(75%);
	}

	.campaign-banner {
		filter: drop-shadow(0 0 2px var(--shadow-weak-20));
	}
}

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