Team Filters

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

.block-team-filters {
	background-color: $veryLightBlue;
	padding-top: rem-calc(80);
	padding-bottom: rem-calc(80);
	position: relative;
	z-index: 99;

	.heading {
		@include fluid-type(28, 34);
	}

	&__buttons {
		margin-top: rem-calc(40);
	}

	&__grid {
		margin-top: rem-calc(20);
		width: 100%;

		&:hover {
			.block-team-filters__grid-block {
				opacity: 0.7;

				&:hover {
					opacity: 1;
				}
			}
		}

		@include bp($lg) {
			margin-top: 0;
		}
	}

	&__grid-row {
		display: flex;

		&:last-of-type {
			align-items: flex-end;
			margin-top: -12%;
		}
	}

	&__grid-column {
		width: 30%;
		padding-left: 1%;
		padding-right: 1%;

		&--large {
			width: 45%;
		}
	}

	&__grid-block {
		background-color: $darkBlue;
		width: 100%;
		padding-bottom: 100%;
		position: relative;
		display: block;
		transition: all 0.3s ease-out;

		&:hover {
			img {
				transform: scale(1.1);
			}
		}

		&--small {
			width: 46%;
			padding-bottom: 46%;
			margin-top: 7%;
		}

		&--large {
			width: 100%;
			padding-bottom: 100%;
		}

		picture {
			overflow: hidden;
		}

		img {
			transition: all 2s ease-in-out;
		}
	}

	.nice-select {
		width: 100%;
		border: none;
		padding-left: 0;
		margin-top: rem-calc(15);
		margin-bottom: rem-calc(30);
		border-bottom: 1px solid $darkBlue;
		border-radius: 0;
		background-color: transparent;

		&:after {
			border-bottom: 2px solid $darkBlue;
			border-right: 2px solid $darkBlue;
			height: rem-calc(14);
			width: rem-calc(14);
			margin-top: rem-calc(-10);
		}

		.option {
			font-size: rem-calc(16);
		}

		.current {
			@include fluid-type(18, 20);
			color: $darkBlue;
			background-color: transparent;
		}
	}

	.nice-select-dropdown {
		width: 100%;
	}
}

class TeamFilters {
	/**
	 * 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-team-filters');
		this.init();
	}

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

			var options = {
				searchable: true,
				placeholder: 'Search by Name'
			};

			var options02 = {
				searchable: true,
				placeholder: 'Search by Service'
			};

			const originalSelect = block.querySelector('#block-team-filters-service-search');
			if(originalSelect) {
				NiceSelect.bind(block.querySelector("#block-team-filters-service-search"), options02);
			}
			NiceSelect.bind(block.querySelector("#block-team-filters-name-search"), options);

			const formSubmitButton = block.querySelector('[type=submit]');

			if(originalSelect) {
				originalSelect.addEventListener("change", function() {
					if (originalSelect.value) {
						formSubmitButton.removeAttribute("disabled");
						formSubmitButton.removeAttribute("title");
					}
				});
			}

			const teamProfiles = block.querySelectorAll(".block-team-filters__grid-block");

			if (teamProfiles !== null)  {
				gsap.set(".block-team-filters__grid-block", {y: 50, opacity: 0});

				ScrollTrigger.batch(".block-team-filters__grid-block", {
					start: "top 100%",
					onEnter: batch => gsap.to(batch, {opacity: 1, y: 0, stagger:  0.15, overwrite: true}),
					onLeave: batch => gsap.set(batch, {opacity: 0, y: -50, overwrite: true}),
					onEnterBack: batch => gsap.to(batch, {opacity: 1, y: 0, stagger: 0.15, overwrite: true}),
					onLeaveBack: batch => gsap.set(batch, {opacity: 0, y: 50, overwrite: true})
				});

				ScrollTrigger.addEventListener("refreshInit", () => gsap.set(".block-team-filters__grid-block", {y: 0}));
			}

			block.querySelector("#block-team-filters-name-search").addEventListener('change', function() {
				window.location.href = this.value;
			});


		});
	}
}

new TeamFilters();