Content Carousel

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

.block-content-carousel {
	padding-top: $grid-gutter-width;

	@include bp($md) {
		padding-top: 0;
	}

	.single-firm & {
		padding-top: rem-calc(50);

		@include bp($md) {
			padding-top: rem-calc(100);
		}
	}

	&__wrapper {
		padding-left: 1rem;
		border-top: 1px solid $border-grey;

		.single-firm & {
			border-top: 1px solid $border-grey;
		}

		@include bp($md) {
			border-top: 0;
			padding-left: 0;
		}
	}

	&__slide {
		display: flex;
		flex-direction: column;
		height: calc(100% - 60px);
		padding: rem-calc(30) $grid-gutter-width;
		text-decoration: none;

		&:hover {
			background-color: #ace6ff40;
		}

		&-heading {
			@include responsive-font($heading-8, $heading-4);
			font-weight: 400;
			text-overflow: ellipsis;
			overflow: hidden;
			margin-top: 0;
			margin-bottom: 0;
			line-height: 1.3;
		}

		&-excerpt {
			margin-bottom: 0;
			flex-grow: 1;
		}

		&-image {
			width: 100%;
			margin-bottom: rem-calc(24);

			picture {
				width: 100%;
			}
		}

		&-icon {
			min-height: 206px;
			margin-bottom: rem-calc(24);

			svg {
				max-height: 110px;
			}
		}

		&-content {
			font-size: $body-default;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex-grow: 1;
			gap: rem-calc(24);

			&--icon {
				display: flex;
				flex-direction: column;
				height: 100%;

				.block-content-carousel__slide-heading {
					margin-bottom: 0;
				}

				.block-content-carousel__slide-excerpt {
					min-height: 100px;
					// margin-top: rem-calc(48);
				}
			}

			&--person {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1 0 auto;

				h3 {
					font-size: $heading-8;
				}

				span {
					display: block;
				}

				&-header {
					min-height: 140px;
				}

				.person-job-title, .person-firm {
					font-size: $body-medium;
				}

				.person-job-title {
					font-weight: 600;
				}

				.person-email {
					margin-top: 1rem;
				}
				.person-location {
					font-size: 12px;
					color: #BEBEBE;
				}
			}
		}
	}

	.swiper {
		border-left: 1px solid $border-grey;
		margin-left: 0;

		@include bp($md) {
			margin-left: $container-spacing-desktop;
			border-left: 1px solid $border-grey;
		}
	}

    .swiper-slide {
		height: auto;
		border-right: 1px solid $border-grey;
		width: 334px; //Fallback for JS disabled


        &__inner {
            min-height: 300px;
            position: relative;

        }
    }

	@include slider-navigation;

	.slider-navigation {
		margin-top: 0;
		padding: 0 rem-calc(24);
	}

	.slider-navigation {
		.slider-button {
			&:hover {
				background-color: $indigo;
			}
		}
	}

	&--landscape {
		.swiper {
			border-left: 0;
		}
		.swiper-slide {
			width: 100%;
			padding: 1rem;

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

			@include bp($lg) {
				padding: rem-calc(130) rem-calc(50);
			}
		}

		.swiper-wrapper {
			flex-direction: column;

			@include bp($md) {
				flex-direction: row;
			}
		}

		.block-content-carousel__slide {
			display: flex;
			flex-direction: column;
			align-items: center;
			border-right: 0;

			@include bp($xl) {
				flex-direction: row;
			}

			&-content {
				padding-left: 0;

				@include bp($md) {
					padding-left: rem-calc(45);
				}
			}

			&-icon {
				display: flex;
				align-items: center;
				min-height: auto;

				@include bp($md) {
					min-height: 206px;
				}
			}

			&-content, &-image {
				width: 100%;

				@include bp($lg) {
					width: auto;
				}
			}

			&-image {
				width: 100%;

				@include bp($lg) {
					width: auto;
				}
			}
		}

		.slider-navigation {
			display: none;
		}
	}

	&--location {
		.block-content-carousel__wrapper {
			padding-left: 0;
		}

		.block-content-carousel__slide {
			border-left: 0;
		}
	}

	&__slide-heading {
		transition: height 0.3s ease;
		overflow: hidden;
	}

	.swiper {
		border-left: 1px solid $border-grey;

		@include bp($md) {
			border-left: 0;
		}
	}

	&.has-light-blue-background-color {
		.block-content-carousel__slide-content--person {
			.person-location {
				color: var(--text-color);
			}
		}
	}
}


.block-section-wrap {
	&:has(.block-content-carousel) {
		.block-content-carousel {
			.section-name {
				display: none;
			}
		}
	}
}

class ContentCarousel {
    block;
    resizeObserver;
    headingHeightTimeout;

	constructor(block) {
		this.block = block;
		this.init();
	}

    equalizeHeadingHeights() {
        if (this.headingHeightTimeout) {
            clearTimeout(this.headingHeightTimeout);
        }

        this.headingHeightTimeout = setTimeout(() => {
            const slideHeadings = this.block.querySelectorAll('.block-content-carousel__slide-heading');
            let maxHeight = 0;

            // First pass: find the maximum height
            slideHeadings.forEach(heading => {
                // Temporarily remove fixed height to get natural height
                heading.style.height = 'auto';
                const height = heading.offsetHeight;
                maxHeight = Math.max(maxHeight, height);
            });

            // Second pass: apply the maximum height
            slideHeadings.forEach(heading => {
                heading.style.height = `${maxHeight}px`;
            });
        }, 100); // Debounce time of 100ms
    }

	init() {
		this.swiperElem = this.block.querySelector('.swiper');
		this.paginationElem = this.block.querySelector('.slider-pagination');
		this.prevBtnElem = this.block.querySelector('.slider-button--prev');
		this.nextBtnElem = this.block.querySelector('.slider-button--next');

		this.swiper = new Swiper(this.swiperElem, {
			pagination: {
				el: this.paginationElem,
				type: "custom",
				renderCustom: function (swiper, current, total) {
					return current + '  ' + total;
				}
			},
			navigation: {
				nextEl: this.nextBtnElem,
				prevEl: this.prevBtnElem
			},
            slidesPerView: 1.25,
            spaceBetween: 0,
            breakpoints: {
                541: {
                    slidesPerView: 2.5,
                },
                1025: {
                    slidesPerView: 4.5,
                },
				1601: {
                    slidesPerView: 5.5,
                },
            },
            on: {
                init: () => this.equalizeHeadingHeights(),
                slideChange: () => this.equalizeHeadingHeights(),
                resize: () => this.equalizeHeadingHeights()
            }
		});

        // Initialize ResizeObserver to handle responsive changes
        this.resizeObserver = new ResizeObserver(() => this.equalizeHeadingHeights());
        this.resizeObserver.observe(this.block);

        // Initial equalization
        this.equalizeHeadingHeights();
	}
}

document.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('.block-content-carousel--portrait').forEach((block) => {
		new ContentCarousel(block);
	})
});

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/content-carousel",
    "title": "Content Carousel",
    "description": "Example block to be used as a template",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-content-carousel.php"
    },
    "supports": {
        "anchor": true,
        "align": false,
        "color": {
            "background": true,
            "text": false,
            "gradients": false
        },
        "spacing": {
            "padding": [
                "top",
                "bottom"
            ],
            "margin": [
                "top",
                "bottom"
            ]
        }
    },
    "example": {
        "attributes": {
            "mode": "preview",
            "data": {
                "heading_type": "h2",
                "heading_text": "Example - Content Carousel",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": ["file:../../assets/css/content-carousel/block-content-carousel.css", "swiper-css"],
    "viewScript": ["swiper-js", "content-carousel"]
}