@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/colours";
@import "../../resources/scss/util/mixins";

.block-hero-featured {
	height: auto;
	width: 100%;
	position: relative;
	background-color: $darkBlue;
	overflow: hidden;
	padding-top: rem-calc(32);
	padding-bottom: rem-calc(80);

	@include bp($lg) {
		height: rem-calc(600);
	}

	.heading {
		color: $white;
		font-size: rem-calc(32);
		line-height: rem-calc(40);
		font-family: $font-family-heading;
		font-weight: 700;
		@include fluid-type(32, 48);

		@include bp($md) {
			line-height: rem-calc(56);
		}
	}

	.container {
		height: 100%;
	}

	.swiper {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1;

		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba($darkBlue, 0.8);
			z-index: 9;
			display: block;
			pointer-events: none;

			@include bp($md) {
				display: none;
			}
		}

		picture {
			object-position: right;
		}
	}

	&__pre-heading {
		color: $white;
		text-transform: uppercase;
		font-weight: 700;
		margin-bottom: rem-calc(20);
		letter-spacing: 1.75px;
		font-size: rem-calc(14);
	}

	&__container {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		transform: none;
		z-index: 2;

		@include bp($lg) {
			position: absolute;
			top: 50%;
			left: 0;
			right: 0;
			transform: translateY(-50%);
		}
	}

	&__copy {
		color: $white;
	}

	&__links {
		margin-top: rem-calc(65);
		display: none;
		position: relative;

		@include bp($md) {
			display: flex;
		}

		&:hover {
			.block-hero-featured__link {
				opacity: 0.5;

				&:hover {
					opacity: 1;
				}
			}
		}
	}

	&__link {
		color: $white;
		text-decoration: none;
		font-size: rem-calc(16);
		display: inline-block;
		max-width: none;
		position: relative;
		margin-right: rem-calc(24);
		transition: all 0.2s ease-out;
		min-width: calc(100% / 3.3);
		max-width: calc(100% / 3);
		height: auto;
		background: transparent;

		@include bp($md) {
			min-width: rem-calc(140);
			max-width: none;
		}

		&:hover {
			.block-hero-featured__link-text-reveal {
				opacity: 1;
				// transition-delay: 0;
			}

			.block-hero-featured__link-text {
				transform: translateY(-20px);
			}
		}
	}

	&__link-text {
		transition: all 0.2s ease-out;
		@include fluid-type(14, 18);
	}

	&__link-text-reveal {
		font-size: rem-calc(14);
		display: inline-flex;
		align-items: center;
		position: absolute;
		left: 0;
		bottom: rem-calc(15);
		opacity: 0;
		transition: all 0.2s ease-out;
		// transition-delay: 0.2s;

		&:after {
			content: '';
			width: rem-calc(12);
			height: rem-calc(12);
			background-image: url('#{$asset-path}/icons/icon-full-arrow-right-orange.svg');
			background-position: center;
			background-repeat: no-repeat;
			margin-left: rem-calc(10);
		}
	}

	&__link-bar {
		width: 100%;
		height: rem-calc(2);
		background-color: $white;
		margin-top: rem-calc(12);
		position: relative;
	}

	&__link-bar-fill {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		height: rem-calc(2);
		background-color: $orange;
		width: 0%;

		.swiper-pagination-bullet-active & {
			animation-name: countingBar;
			animation-duration: 4s;//autopaly 시간과 맞춰주기
			animation-timing-function: ease-in;
			animation-iteration-count: 1;
			animation-direction: alternate ;
			animation-fill-mode:forwards;
		}
	}

	@keyframes countingBar {
		0% {width: 0;}
		100% {width:100%;}
	}

}

class heroFeatured {
	/**
	 * Create and initialise objects of this class
	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
	 * @param {object} block
	 */
	constructor() {
		this.blocks = document.querySelectorAll('.block-hero-featured');
		this.init();
	}

	/**
	 * Example function to run class logic
	 * Can access `this.block`
	 */
	init() {

		this.blocks.forEach((block) => {

			const blockCarousel = block.querySelector(".swiper");
			const blockSlides = block.querySelectorAll(".swiper-slide");
			var blockData = [];

			blockSlides.forEach((block) => {
				blockData.push({
					slideTitle: block.getAttribute('data-title'),
					slideLink: block.getAttribute('data-link'),
					slideTarget: block.getAttribute('data-target'),
				});
			});

			var listArray = ["slide1","slide2","slide3"];

			const swiper = new Swiper(blockCarousel, {
				// Optional parameters
				loop: true,
				slidesPerView: 1,
				autoplay: {
					delay: 4000,
					speed: 4000,
					disableOnInteraction: false,
				},
				effect: 'fade',
				fadeEffect: {
					crossFade: true
				},
				pagination: {
					el: '.block-hero-featured__links',
					clickable: false,
					type: 'bullets',
					renderBullet: function (index, className) {

						return '
' +  blockData[index].slideTitle + '
Learn more
';

						// return '' + ''+ listArray[index]+'' + '' + ''  + '';
					},
				},
			});


			const slideLinks = block.querySelectorAll(".block-hero-featured__link");

			if (slideLinks) {
				slideLinks.forEach(function (link, i) {
					link.addEventListener("mouseover", function() {
						swiper.slideTo(i + 1);
					});
				});
			}

		});
	}
}

new heroFeatured();