Content Players

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

.block-players {
	overflow: hidden;

	&:not([class*=pad-]) {
		@include padding( rem-calc(64 0) );
	}

	&__meta {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		@include margin-bottom( rem-calc(60) );

		.heading {
			margin-bottom: 0;
		}
	}

	&__game {
		width: 100%;
		border: none;
		min-height: rem-calc(94);
		box-sizing: border-box;
		background-color: $grey;
		@include padding( rem-calc(32 0) );
		margin-bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		transition: 0.3s var(--ease);
		transition-property: background-color;

		@include bp($xl) {
			min-height: rem-calc(104);
		}

		.block-players__game-logo {
			opacity: 0;

			&.block-players__game-logo-dark {
				opacity: 1;
			}
		}

		&:hover,
		&.active {
			background-color: $primary;

			p {
				color: $white;
			}

			.block-players__game-logo {
				opacity: 0;

				&.block-players__game-logo-light {
					opacity: 1;
				}
			}
		}

		p {
			margin-bottom: 0;
			color: $primary;
			transition: 0.3s var(--ease);
			transition-property: color;
		}
	}

	&__game-logo {
		max-width: rem-calc(273);
		max-height: rem-calc(44);
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate3d(-50%,-50%,0);
		transition: 0.3s var(--ease);
		transition-property: opacity;

		img {
			width: auto;
			height: 100%;
			object-fit: contain;
		}
	}

	&__filters {
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		gap: rfs-fluid-value( rem-calc(20) );
	}

	&__filter {
		width: 100%;
		min-height: rem-calc(60);
		border: none;
		background-color: $grey;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		@include fluid-type(14, 18);
		font-weight: 800;
		color: $primary;
		transition: 0.3s var(--ease);
		transition-property: background-color, color, opacity;
		text-transform: uppercase;

		&:hover,
		&.active,
		&.inactive {
			background-color: $primary;
			color: $white;
		}

		&.inactive {
			opacity: 0.3;

			&:hover {
				opacity: 1;
			}
		}
	}

	&__gamer-row {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: rfs-fluid-value( rem-calc(32) );
		@include margin-top( rem-calc(100) );
		padding: 0;

		display: grid;
		grid-template-columns: 1fr;

		@include bp($sm) {
			grid-template-columns: repeat(2, 1fr);
		}

		@include bp($md) {
			min-height: rem-calc(340);
		}

		@include bp($lg) {
			grid-template-columns: repeat(3, 1fr);
		}

		@include bp($xxl) {
			grid-template-columns: repeat(4, 1fr);
		}

		.no-cards {
			width: 100%;
			text-align: center;

			&.hide {
				display: none;
			}
		}
	}

	&__gamer-col {
		--text-color: #{$primary};

		width: 100%;
		min-height: rem-calc(300);
		background-color: $grey;
		@include padding( rem-calc(16 30) );
		position: relative;

		@include bp($md) {
			min-height: rem-calc(340);
		}

		@include bp($xxl) {
			min-height: rem-calc(407);
		}

		&.hide {
			display: none;
		}

		&:before {
			width: 100%;
			height: 100%;
			content: '';
			background-color: $primary;
			position: absolute;
			inset: 0;
			z-index: 5;
			pointer-events: none;
			opacity: 0;
			transition: 0.3s var(--ease);
			transition-property: opacity;
		}

		&:hover {
			--text-color: #{$white};

			&:before {
				opacity: 0.8;
			}

			.block-players__bio {
				opacity: 1;
				pointer-events: all;
			}

			.team-logo-container {
				.team-logo-light {
					opacity: 1;
				}
				.team-logo-dark {
					opacity: 0;
				}
			}
		}
	}

	&__gamer {
		.block-players__bio {
			width: 90%;
			max-width: rem-calc(400);
			max-height: rem-calc(184);
			overflow-y: scroll;
			color: $white;
			position: absolute;
			top: 50%;
			left: 50%;
			z-index: 20;
			transform: translate3d(-50%,-50%,0);
			opacity: 0;
			pointer-events: none;
			transition: 0.3s var(--ease);
			transition-property: opacity;

			&::-webkit-scrollbar-track {
				-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
				border-radius: 8px;
				background-color: transparent;
			}

			&::-webkit-scrollbar {
				width: 4px;
				background-color: transparent;
			}

			&::-webkit-scrollbar-thumb {
				border-radius: 10px;
				-webkit-box-shadow: none;
				background-color: $light-blue;
			}

			p {
				@include fluid-type(14,18);
			}
		}

		.player-profile {
			max-width: 50%;
			max-height: 80%;
			position: absolute;
			left: rem-calc(12);
			overflow: hidden;
			bottom: 0;
			z-index: 2;

			display: flex;
			flex-direction: column;
		}

		.team-logo-container {
			width: rem-calc(62);
			height: rem-calc(54);
			position: relative;
			z-index: 20;
			position: absolute;
			bottom: rfs-fluid-value( rem-calc(10) );
			right: rfs-fluid-value( rem-calc(10) );

			.team-logo-light,
			.team-logo-dark {
				transition: 0.3s var(--ease);
				transition-property: opacity;
			}

			.team-logo-light {
				opacity: 0;
				position: absolute;
				inset: 0;
			}

			picture {
				display: flex;
				flex-direction: column;

				img {
					width: 100%;
					height: 100%;
					object-fit: contain;
				}
			}

			img {
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		}
	}

	&__gamer-meta {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: rem-calc(16);
		align-items: center;
		justify-content: space-between;
		position: relative;
		z-index: 10;

		p {
			color: var(--text-color);
			@include fluid-type( 22, 36 );
			font-weight: 800;
			text-transform: uppercase;
			margin-bottom: 0;
			transition: 0.3s var(--ease);
			transition-property: color;
		}

		.social {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: flex-end;
			gap: rem-calc(16);

			svg {
				width: rem-calc(25);
				display: block;
				transition: 0.3s var(--ease);
				transition-property: fill;
				fill: var(--text-color);

				&:hover {
					fill: $secondary;
				}
			}
		}
	}

	&__tab-row {
		margin: 0;
		padding: 0;
	}

	.swiper {
		width: 100%;
		overflow: visible;

		.swiper-button-prev,
		.swiper-button-next {
			@include bp($lg) {
				width: rem-calc(60);
				height: rem-calc(60);
			}

			@include bp($xl) {
				width: rem-calc(60);
				height: rem-calc(60);
			}

			@include bp($xxxl) {
				width: rem-calc(60);
				height: rem-calc(60);
			}
		}
	}
}

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

		ScrollTrigger.create({
			trigger: this.block,
			start: 'top bottom',
			end: 'bottom top',
			onEnter: () => this.initialiseSwiper(),
		});

		this.cards = this.block.querySelectorAll( '.block-players__gamer-col' );
		this.noCards = this.block.querySelector('.no-cards')

		this.gameFilters = this.block.querySelectorAll( '.block-players__game' );
		if ( this.gameFilters ) {
			this.gameFilters.forEach( filter => {
				filter.addEventListener( 'click', e => {
					this.gameFilter( filter );
				});
			});
		}

		this.genderFilters = this.block.querySelectorAll( '.block-players__filter' );
		if ( this.genderFilters ) {
			this.genderFilters.forEach( filter => {
				filter.addEventListener( 'click', e => {
					this.genderFilter( filter );
				});
			});
		}

		this.activeGameFilter = null;
		this.activeGenderFilter = null;
	}

	gameFilter( filter ) {
		this.gameFilters.forEach( filter => filter.classList.remove('active') );
		this.gameFilters.forEach( filter => filter.classList.remove('active') );
		filter.classList.add('active');

		if ( this.genderFilters ) {
			this.genderFilters.forEach( filter => filter.classList.remove('active') );
		}

		this.activeGameFilter = filter.getAttribute( 'data-id' );
		this.activeGenderFilter = null;

		this.filter();
	}

	genderFilter( filter ) {
		this.gameFilters.forEach( filter => filter.classList.remove('active') );
		this.genderFilters.forEach( filter => filter.classList.remove('active') );
		this.genderFilters.forEach( filter => filter.classList.remove('inactive') );

		let game = this.block.querySelector( `.block-players__game[data-id='${filter.getAttribute( 'data-game' )}']` );
		game.classList.add('active');
		filter.classList.add('active');

		this.activeGameFilter = filter.getAttribute( 'data-game' );
		this.activeGenderFilter = filter.getAttribute( 'data-filter-id' );

		let siblingFilter = this.block.querySelector( `.block-players__filter[data-game='${filter.getAttribute( 'data-game' )}']:not(.active)` );
		if ( siblingFilter ) {
			siblingFilter.classList.add( 'inactive' );
		}

		this.filter();
	}

	filter() {
		this.cards.forEach( card => card.classList.remove( 'hide' ) );
		this.noCards.classList.add('hide');

		this.cards.forEach( card => {
			card.classList.add( 'hide' );

			let games = JSON.parse( card.getAttribute('data-games') );
			if ( games ) {
				if ( games.includes( parseInt( this.activeGameFilter ) ) ) {
					card.classList.remove( 'hide' );
				}
			}

			if ( this.activeGenderFilter ) {
				if ( this.activeGenderFilter === 'all' ) {
					return;
				} else {
					let gender = card.getAttribute('data-gender');

					if ( gender === 'all' ) {
						card.classList.add( 'hide' );
					}
				}
			}
		});

		this.hiddenCards = this.block.querySelectorAll( '.block-players__gamer-col.hide' );
		if ( this.hiddenCards.length === this.cards.length ) {
			this.noCards.classList.remove('hide');
		}
	}

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

		this.swiper = new Swiper( this.block.querySelector( '.swiper' ), {
			slidesPerView: 1,
			spaceBetween: 16,
			speed: 600,
			navigation: {
				nextEl: this.block.querySelector( '.swiper-button-next' ),
				prevEl: this.block.querySelector( '.swiper-button-prev' ),
			},
			breakpoints: {
				800: {
					slidesPerView: 2,
					spaceBetween: 30,
				},
				992: {
					slidesPerView: 3,
					spaceBetween: 30,
				},
			}
		});
	}
}

document.querySelectorAll('.block-players').forEach((block) => {
	new PlayersFilter( block );
});