<template>
	<div class="apply-container container flex flex-col" ref="applyRef">
		<div class="title" ref="applyTitleRef">How to Apply</div>
		<div class="sub-title" ref="applySubTitleRef">Requirments</div>
		<div class="requirments-list flex" ref="reqListRef">
			<div class="left flex flex-col space-between">
				<div class="item-box" v-for="item in leftRequirment" :key="item.type">
					<div class="item-header flex align-center">
						<img src="@/assets/images/award/bloom_logo.png" class="logo" />
						<div class="item-title">{{ item.type }}</div>
					</div>
					<div class="context" v-for="el in item.desc">
						{{ el }}
					</div>
				</div>
			</div>
			<div class="right">
				<div class="item-box">
					<div class="item-box">
						<div class="item-header flex align-center">
							<img src="@/assets/images/award/bloom_logo.png" class="logo" />
							<div class="item-title">{{ rightRequirment.type }}</div>
						</div>
						<div class="context" v-for="el in rightRequirment.desc">
							{{ el }}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
import { gsap } from 'gsap'

const leftRequirment = ref([
	{
		type: 'Video',
		desc: ['The process of doing design']
	},
	{
		type: 'Design',
		desc: [
			'Structure: design title, moodboard and elaboration (how will you use AiDA to design)',
			'Design sketch: Maximum 4 outfit design with proposed materials'
		]
	}
])

const rightRequirment = ref({
	type: 'Submission Format',
	desc: [
		'Naming as “AiDA global award 2026_applicantname”',
		'Mp4\n(1080x1920pixels/20mb within 1min)',
		'Single PDF file\n(within 15 pages, maximum 20mb)',
		'English or native language\nwith English translation'
	]
})

const applyRef = ref<HTMLElement | null>(null)
const applyTitleRef = ref<HTMLElement | null>(null)
const applySubTitleRef = ref<HTMLElement | null>(null)
const reqListRef = ref<HTMLElement | null>(null)
const hasPlayedApplyAnim = ref(false)
let applyObserver: IntersectionObserver | null = null

const setupApplyInitialState = () => {
	const titleEls = [applyTitleRef.value, applySubTitleRef.value].filter(
		Boolean
	) as HTMLElement[]
	if (titleEls.length) {
		gsap.set(titleEls, {
			opacity: 0,
			scale: 0,
			transformOrigin: '50% 50%'
		})
	}
	const headers = reqListRef.value?.querySelectorAll<HTMLElement>('.item-header')
	const contexts = reqListRef.value?.querySelectorAll<HTMLElement>('.context')
	gsap.set([headers, contexts], { opacity: 0 })
}

const playApplyAnimation = () => {
	if (hasPlayedApplyAnim.value) return
	const titleEls = [applyTitleRef.value, applySubTitleRef.value].filter(
		Boolean
	) as HTMLElement[]
	const headers = reqListRef.value?.querySelectorAll<HTMLElement>('.item-header')
	const contexts = reqListRef.value?.querySelectorAll<HTMLElement>('.context')
	if (!titleEls.length) return

	const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })
	tl.to(titleEls, {
		opacity: 1,
		scale: 1,
		duration: 0.6,
		ease: 'back.out(1.6)',
		stagger: 0.1
	})
	if (headers?.length) {
		tl.to(
			headers,
			{
				opacity: 1,
				duration: 0.4,
				stagger: 0.1
			},
			'-=0.1'
		)
	}
	if (contexts?.length) {
		tl.to(
			contexts,
			{
				opacity: 1,
				duration: 0.4,
				stagger: 0.05
			},
			'-=0.05'
		)
	}

	hasPlayedApplyAnim.value = true
	applyObserver?.disconnect()
}

onMounted(() => {
	nextTick(() => {
		setupApplyInitialState()
		if ('IntersectionObserver' in window) {
			applyObserver = new IntersectionObserver(
				(entries) => {
					entries.forEach((entry) => {
						if (entry.isIntersecting) {
							playApplyAnimation()
						}
					})
				},
				{ threshold: 0.25 }
			)
			if (applyRef.value) applyObserver.observe(applyRef.value)
		} else {
			playApplyAnimation()
		}
	})
})

onBeforeUnmount(() => {
	applyObserver?.disconnect()
})
</script>

<style scoped lang="less">
.apply-container {
	flex: 1;
	background: url('@/assets/images/award/apply_bg.png') no-repeat;
	background-size: 100% 100%;
	padding: 12.7rem 0 16.9rem;
	.title {
		text-align: center;
		color: #232323;
		font-family: 'PoppinsBold';
		font-weight: 600;
		font-size: 4rem;
		margin-bottom: 3rem;
	}
	.sub-title {
		text-align: center;
		color: #b10000;
		font-size: 3rem;
		font-family: 'Arial';
		font-weight: 400;
	}
	.requirments-list {
		flex: 1;
		padding-left: 41.4rem;
		column-gap: 17.7rem;
		margin-top: 12rem;
		.left {
			color: #232323;
			height: 100%;
		}
		.item-box {
			.item-header {
				column-gap: 3.2rem;
				.item-title {
					color: #232323;
					font-family: 'PoppinsBold';
					font-weight: 600;
					font-size: 2.8rem;
				}
			}
			.context {
				margin-top: 4rem;
				width: 46.8rem;
				color: #585858;
				font-family: 'Arial';
				font-weight: 400;
				line-height: 3rem;
				font-size: 2.4rem;
				padding-left: 5.6rem;
				white-space: pre-line;
			}
		}
	}
}
</style>
