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

.block-locations-archive{
    padding-top: 5rem;
    
    @include bp($lg){
        padding: rem-calc(100 0 96 0);
    }

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

    .heading-row{
        align-items: center;
        margin-bottom: rem-calc(32);

        @include bp($lg){
            margin-bottom: rem-calc(56);
        }

        .content,
        .content p {
            @include fluid-type(16, 24);
            line-height: 24px;

            @include bp($lg) {
                line-height: 32px;
            }
        }

        .content {
            max-width: rem-calc(916);
            margin-top: rem-calc(24);

            @include bp($lg) {
                margin-top: rem-calc(32);
            }
        }

    }
    .heading{
        @include fluid-type(40, 64);
        line-height: rem-calc(48);
        letter-spacing: 0.02em;
        font-weight: 400;
        margin-bottom: 0;

        @include bp($lg){
            font-size: rem-calc(56);
            line-height: rem-calc(64);            
        }
    }

    .location-grid-row {
        position: relative;
    }

    .block-locations-archive__links {
        position: sticky;
        top: 4rem;
        z-index: 1;
        background-color: white;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: scroll;
        padding-bottom: 0.5rem;

        @include bp($xl) {
            justify-content: space-between;
            top: 5.8rem;
            overflow-x: hidden;
        }

        /* style scroll */
        &::-webkit-scrollbar {
            height: 0.5rem;
        }

        &::-webkit-scrollbar-track {
            background: #F2F2F2;
        }

        &::-webkit-scrollbar-thumb {
            background: #D9D9D9;
            border-radius: 0.5rem;
        }
        
        a {
            display: inline-block;
            padding: 1rem;
            min-width: rem-calc(195);
            margin-right: 1.25rem;
            border-bottom: 1px solid #D9D9D9;
            transition: all 0.3s ease-in-out;
            text-align: center;
            @include fluid-type(14, 20);
            text-decoration: none;
            color: var(--black);
            white-space: nowrap;

            &.active,
            &:hover {
                border-bottom: 2px solid #1C4AF2;
                font-weight: 600;
            }
        }
    }

    .region__title {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        margin-bottom: rem-calc(26);
        margin-top: rem-calc(40);

        @include bp($md) {
            margin-bottom: rem-calc(48);
            margin-top: rem-calc(80);
        }

        .region__heading {
            padding-right: 2rem;
            font-size: 2rem;
            font-weight: 400;
            margin-bottom: 0;
        }
        span {
            display: inline-block;
            height: 1px;
            background-color: black;
            flex-grow: 1;

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

    .location-grid {
        gap: 1rem;
        

        @include bp($md) {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
        }

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

        .location-card {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-bottom: 2rem;

            &__image {
                display: block;
                aspect-ratio: 4/3;
                position: relative;
                overflow: clip;
                text-decoration: none;

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

            &__image,
            picture,
            img {
                border-radius: 30px;
            }

            &:hover {
                .location-card__image {
                    img {
                        transform: scale(1.1);
                    }
                }
            }

            &__title {
                font-size: rem-calc(24);
                margin: 1rem 0;
                font-weight: 600;
                text-decoration: none;
                color: black;
                display: block;
            }

            &__links {
                margin-top: auto;

                @include bp($xl) {
                    display: flex;
                    gap: 0.25rem;
                }
            }

            &__links a {
                display: block;
                width: 100%;
                border-radius: 56px;
                border: 1px solid #F96336;
                padding: rem-calc(14 25);
                text-align: center;
                transition: all 0.3s ease-in-out;
                margin: 0.5rem 0 1rem;
                text-decoration: none;

                &.link-details {
                    background-color: #F96336;
                    color: #ffffff;

                    &:focus,
                    &:hover {
                        background-color: var(--white);
                        color: var(--black);
                    }
                }

                &.link-contact {
                    color: var(--black);

                    &:focus {
                        background-color: #F96336;
                        color: #ffffff;
                    }
                }
            }
        }
    }
}

.admin-bar {
    .block-locations-archive__links {
        top: 6rem;

        @include bp($xl) {
            top: 7.8rem;
        }
    }
}

class LocationsBlock {
	/**
	 * Create and initialise objects of this class
	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
	 * @param {object} block
	 */
	constructor(block) {
		this.block = block;
        this.initLinks();
	}

	initLinks() {
		this.links = this.block.querySelectorAll('.block-locations-archive__links a');

		if(!this.links.length) return;

		// use an intersection observer to add active class to the link when the target is in view
		const observer = new IntersectionObserver((entries) => {
			entries.forEach((entry) => {
				if(entry.isIntersecting) {
					const targetId = `#${entry.target.id}`;
					console.log(entry.target.id);
					this.links.forEach((link) => {
						if(link.getAttribute('href') === targetId) {
							link.classList.add('active');

						} else {
							link.classList.remove('active');
						}
					});
				}
			}, {
				threshold: 1,
			});
		});

		// observe each target
		this.links.forEach((link) => {
			const targetId = link.getAttribute('href');
			const target = document.querySelector(targetId);
			if(!target) return;
			observer.observe(target);

			// add click event to scroll to target
			link.addEventListener('click', (e) => {
				e.preventDefault();
				window.scrollTo({
					top: target.offsetTop + 250,
					behavior: 'smooth',
				});

				// this is a hack to combat the intersection observer firing for the next section but we are still in the current section
				setTimeout(() => {
					this.links.forEach((link) => {
						link.classList.remove('active');
					});
	
					link.classList.add('active');
				}, 1500);
			});
		});

    }

}

document.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('.block-locations-archive').forEach((block) => {
		new LocationsBlock(block);
	});
});