@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

.block-hero-video-carousel {
	// height: 100vh;
	// height: calc(100vh - 168px);

	// margin-top: -168px;
	// height: 100vh;

	position: relative;

	&__initial-slide {
		width: 100%;
		height: 75vh;
		position: relative;
		z-index: 10;
		@include padding-top( rem-calc(90) );
		@include padding-bottom( rem-calc(90) );

		@include bp($md) {
			height: 100vh;
			pointer-events: none;
		}
	}

	&__initial-slide-container {
		// max-width: rem-calc(1280);
		z-index: 5;
		transform-origin: 0 0;
		position: absolute;
		bottom: rem-calc(40);
		padding-right: rem-calc(30);

		@include bp($md) {
			padding-right: 0;
			bottom: rem-calc(190);
		}

		.heading {
			margin-bottom: 0;
		}

		h1 {
			font-weight: 800;
			position: relative;
			// font-size: 140px;
			// font-size: clamp(32px, 12vw, 140px);
			text-transform: uppercase;
			color: var(--text-color);

			// @include fluid-type(32, 140);
			@include fluid-type(32, 100);


			@include bp($md) {
				font-size: 80px;
				font-size: clamp(32px, 12vw, 80px);
			}

			@include bp(1500px) {
				font-size: 140px;
				font-size: clamp(32px, 12vw, 140px);
			}

			&:before {
				width: 12vw;
				max-width: 300px;
				height: 1ch;
				content: '';
				display: inline-block;
				margin-right: rem-calc(16);
				background-image: url('/wp-content/themes/british-esports/assets/icons/arrow-right--white.svg');
				background-repeat: no-repeat;
				background-position: calc(80%) center;

				@include bp($md) {
					height: 1ch;
				}

				@include bp(1500px) {
					width: 18vw;
					max-width: 300px;
					margin-right: rem-calc(32);
				}
			}

			html:not(.wf-active) & {
				letter-spacing: -6px;
				font-family: 'Arial', sans-serif;
			}
		}

		p.intro {
			max-width: 500px;
			@include fluid-type(16, 24);
			font-weight: 500;
			line-height: 1.5;
			margin-top: 1rem;
			margin-bottom: 0;
			color: var(--text-color);

			@include bp($md) {
				font-size: 26px;
				font-size: clamp(4px, 2vw, 26px);
			}

			@include bp($lg) {
				font-size: 23px;
				font-size: clamp(4px, 2vw, 23px);
			}

			@include bp(1500px) {
				width: 50%;
				position: absolute;
				bottom: rem-calc(6);
				right: 0;
				margin-top: 0;
			}
		}
	}

	&__initial-slide-video {
		background-color: $primary;

		&:after {
			width: 100%;
			height: 100%;
			content: '';
			pointer-events: none;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 2;
			background: linear-gradient(180deg, rgba(3, 10, 50, 0) 0%, #030A32 100%);

			@include bp($md) {
				height: 50%;
			}
		}
	}

	&__carousel {
		width: 100%;
		height: 75vh;
		position: relative;
		z-index: 5;

		@include bp($md) {
			height: 100vh;
			position: absolute;
			top: 0;
			left: 0;
		}

		.slide-count,
		.heading,
		.intro {
			color: var(--text-color);
			@include margin-bottom( rem-calc(24) );
		}

		.slide-count {
			@include fluid-type(16, 18);
		}

		.intro {
			font-weight: 700;
			margin-bottom: 0;
		}

		.buttons-container {
			@include margin-top( rem-calc(32) );
		}

		.swiper {
			height: 100%;

			.swiper-slide {
				background-color: $primary;
				position: relative;
				box-sizing: border-box;
				overflow: hidden;

				@include padding-top( rem-calc(90) );
				@include padding-bottom( rem-calc(90) );

				display: flex;
				flex-direction: column;
				justify-content: flex-end;

				&:before,
				&:after {
					width: rem-calc(1000px);
					aspect-ratio: 1/1;
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					pointer-events: none;
					filter: blur(142px);
					border-radius: 100%;
					z-index: 2;

					@-moz-document url-prefix() {
						opacity: 0.75;
					}
				}

				&:before {
					transform: translate3d(-30%,20%,0);
					background: $light-blue;

					@include bp($md) {
						transform: translate3d(-30%,40%,0);
					}
				}

				&:after {
					width: rem-calc(500px);
					transform: translate3d(40%,75%,0);
					background: $secondary;
				}

				&.swiper-slide-active {
					.container {
						&:after {
							animation-name: slide-progress;
							animation-duration: 8s;
							animation-fill-mode: forwards;
							animation-timing-function: linear;
						}
					}

					.block-hero-video-carousel__carousel-slide {
						opacity: 1;
					}
				}

				&.swiper-slide-duplicate {
					.block-hero-video-carousel__carousel-slide {
						opacity: 1 !important;
						visibility: visible !important;
					}
				}

				.container {
					&:after {
						width: 100%;
						height: rem-calc(4);
						content: '';
						background-color: $secondary;
						position: absolute;
						bottom: 0;
						left: 0;
						z-index: 10;
						pointer-events: none;
						transform-origin: left center;
						transform: scaleX(0);
					}
				}

				.buttons-container {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					align-items: center;
					gap: rem-calc(16);
				}
			}
		}
	}

	&__carousel-slide {
		position: relative;
		z-index: 5;
	}
}

@keyframes slide-progress {
	from {

	}
	to {
		transform: scaleX(1);
	}
}

class HeroVideoCarousel {
	/**
	 * @param {object} block
	 */
	constructor( block ) {
		this.block = block;
		this.swiper = null;
		this.initialised = false;

		// this.animatedHero();
		let mql = window.matchMedia('(min-width: 768px)');
		if ( mql.matches ) {
			this.animatedHero();
		} else {
			this.initialiseSwiper();
		}
		mql.addEventListener( 'change', e => {
			if ( e.matches ) {
				this.animatedHero();
			} else {
				this.st1.kill( true, true );
				this.st2.kill( true, true );
				this.st3.kill( true, true );
				this.initialiseSwiper();
			}
		});
	}

	animatedHero() {
		let tl = gsap.timeline({
			paused: true,
			delay: 0,
			ease: 'none',
		});

		tl.fromTo(
			'.block-hero-video-carousel__initial-slide-video',
			{
				autoAlpha: 1,
			}, {
				autoAlpha: 0,
				delay: 0,
				ease: 'none',
			},
			0
		);

		//
		tl.fromTo(
			'.block-hero-video-carousel__initial-slide-container',
			{
				scale: 1,
				y: 0,
			}, {
				scale: 0.25,
				y: '-30vh',
				delay: 0,
				ease: 'none',
			},
			0
		);

		if ( this.block.querySelector( '.block-hero-video-carousel__initial-slide-container .intro' ) ) {
			tl.fromTo(
				'.block-hero-video-carousel__initial-slide-container .intro',
				{
					autoAlpha: 1,
				}, {
					autoAlpha: 0,
					delay: 0,
					ease: 'none',
				},
				0
			);
		}

		tl.fromTo(
			this.block.querySelectorAll('.block-hero-video-carousel__carousel-slide'),
			{
				autoAlpha: 0,
			}, {
				autoAlpha: 1,
				delay: 0,
				ease: 'none',
			},
			0.5,
		);

		this.st1 = ScrollTrigger.create({
			trigger: this.block,
			end: () => window.innerHeight * 2,
			pin: true,
			scrub: true,
			animation: tl,
			onLeaveBack: () => {
				if ( this.swiper ) {
					this.swiper.destroy( true, true );
					this.swiper = null;
				}
			},
			onEnterBack: () => {
				this.initialiseSwiper();
			}
		});

		this.st2 = ScrollTrigger.create({
			trigger: this.block,
			start: 'bottom top',
			end: () => window.innerHeight * 2,
			onEnter: () => {
				// destroy swiper
				if ( this.swiper ) {
					this.swiper.destroy( true, true );
					this.swiper = null;
				}
			},
			onEnterBack: () => {
				//
			},
			onLeave: () => {
				//
			},
			onLeaveBack: () => {
				// init swiper
				this.initialiseSwiper();
			}
		});

		this.st3 = ScrollTrigger.create({
			start: 'top bottom',
			end: 'bottom top',
			trigger: this.block.querySelector('.block-hero-video-carousel__carousel'),
			onEnter: () => {
				//
			},
			onEnterBack: () => {
				//
			},
			onLeave: () => {
				this.initialiseSwiper();
			},
			onLeaveBack: () => {
				//
			}
		});
	}

	initialiseSwiper() {
		if ( this.swiper ) {
			return;
		}

		this.swiper = new Swiper( this.block.querySelector( '.swiper' ), {
			slidesPerView: 1,
			speed: 800,
			loop: true,
			autoplay: {
				delay: 8000,
			},
			effect: 'fade',
			fadeEffect: {
				crossFade: true
			},
		});
	}
}

document.querySelectorAll('.block-hero-video-carousel').forEach((block) => {
	new HeroVideoCarousel( block );
});