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

.block-enriched-accordion {
    padding-top: clamp(40px, 8vw, 140px);
	padding-bottom: clamp(40px, 8vw, 140px);
    --text-color: var(--primary);

    &--negative-margin {
        border-radius: 50px;
        margin-top: -3rem;

        @include bp($md, true) {
            border-radius: 30px;
        }
    }

    &.has-secondary-background-color {
        background-color: var(--white) !important;
    }

    &__explore {
        color: var(--primary);
    }

    &.has-primary-background-color,
    &.has-tertiary-background-color,
    &.has-accent-background-color {
        --text-color: var(--white);
        --text-color: var(--white);
        border-radius: 30px;

        @include bp($lg) {
            border-radius: 50px;

            @include bp($md, true) {
                border-radius: 30px;
            }
        }

        .block-enriched-accordion {
            &__item-wrapper {
                border: 1px solid rgba(255, 255, 255, 0.3);
                &.is-closed {
                    background-color: var(--primary);
                    color: var(--white);
                    border: none;

                    .block-enriched-accordion {
                        &__trigger {
                            --text-color: var(--white);
                        }

                        &__explore .btn {
                            span {
                                color: var(--white);
                            }

                            &:hover {
                                span {
                                    color: var(--primary);
                                }
                            }

                            @include bp($xl, true) {
                                color: transparent;
                                background-image: url("data:image/svg+xml,%3Csvg width='18' height='27' viewBox='0 0 18 27' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.870117 19.6006L8.87012 26.0006L16.8701 19.6006' stroke='%23fff'/%3E%3Cpath d='M8.87011 26L8.87012 0' stroke='%23fff'/%3E%3C/svg%3E%0A");
                                background-size: 65% 65%;
                                background-position: center;
                                background-repeat: no-repeat;
                            }
                        }
                    }
                }

                &:before {
                    background-color: var(--white);
                    opacity: 0.3;
                }
            }
        }
    }

    &.has-tertiary-background-color {
        .block-enriched-accordion {
            &__item-wrapper {
                background-color: var(--tertiary);
                &.is-closed {
                    background-color: var(--tertiary);

                    .block-enriched-accordion {
                        &__explore span {
                            color: var(--white);
                        }
                    }
                }
            }

            &__background-image {
                &:after {
                    background: radial-gradient(ellipse at 75% 40%, transparent 0%, transparent 15%, rgba(62, 133, 119, 1) 55%);

                    @include bp($xl, true) {
                        background: radial-gradient(ellipse at 90% 40%, transparent 0%, transparent 5%, rgba(62, 133, 119, 1) 35%);
                    }
                }
            }
        }
    }

    &.has-accent-background-color {
        .block-enriched-accordion {
            &__item-wrapper {
                background-color: var(--accentBlue);
                &.is-closed {
                    background-color: var(--accentBlue);
                }
            }

            &__background-image {
                &:after {
                    background: radial-gradient(ellipse at 75% 40%, transparent 0%, transparent 15%, rgba(21, 127, 168, 1) 55%);

                    @include bp($xl, true) {
                        background: radial-gradient(ellipse at 90% 40%, transparent 0%, transparent 5%, rgba(21, 127, 168, 1) 35%);
                    }
                }
            }
        }
    }

    &__wrapper {
        max-width: calc(100vw - 48px);
        margin: 0 auto;

        @include bp(1432px) {
            max-width: 1400px;
        }
    }

    .heading-wrapper .heading {
        font-family: Montserrat;
        font-size: clamp(24px, 4vw, 44px);
        font-weight: 600;
        text-align: center;
        padding-bottom: 4rem;
        color: var(--text-color);
    }

    &__background-image {
        opacity: 1;
        transition: opacity 0.3s ease-in-out;

        img {
            z-index: 0;
        }

        &:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(ellipse at 110% 0%, transparent 0%, transparent 15%, rgba(56, 53, 81, 1) 55%);
            background-size: 100% 160%;
            z-index: 1;
            border-radius: 10px;

            @include bp($xl, true) {
                background: radial-gradient(ellipse at 90% 40%, rgba(56, 53, 81, 0.6) 0%, rgba(56, 53, 81, 0.6) 5%, rgba(56, 53, 81, 0.9) 35%);
            }
        }
    }

    &__heading {
        font-family: Montserrat;
        font-size: clamp(22px, 4vw, 28px);
        font-weight: 600;
        cursor: pointer;
        margin-bottom: 0;
    }

    &__heading-trigger {
        display: flex;
        flex-row: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        /* padding-bottom: 1rem; */

        @include bp($xl, true) {
            flex-wrap: wrap;
        }
    }

    &__explore {
        transition: opactiy 0.3s ease-in-out;
        opacity: 0;
        position: absolute;   
        text-align: right;
        pointer-events: none;

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

    &__trigger-wrapper {
        text-align: right;

        @include bp($xl, true) {
            text-align: left;
        }
    }

    &__trigger {
        width: rem-calc(44);
        height: rem-calc(44);
        border: 1px solid var(--text-color);
        position: relative;
        display: inline-block;
        border-radius: 50%;

        &::before,
        &::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60%;
            height: 2px;
            background-color: var(--text-color);
            transition: all 0.3s ease-in-out;
        }

        &::before {
            transform: translate(-50%, -50%) rotate(0deg);
        }

        &::after {
            transform: translate(-50%, -50%) rotate(0deg);
        }

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

    &__content {
        max-width: rem-calc(500);
        padding-top: 2rem;
        padding-bottom: 2rem;

        p {
            font-size: clamp(18px, 2vw, 22px);
        }
    }

	&__item-wrapper {
        overflow: hidden;
        background-color: var(--primary);
        padding: 2rem;
        --text-color: var(--white);
        color: var(--text-color);
        border-radius: 50px;
        transition: all 0.3s ease-in-out;
        position: relative;

        @include bp($md, true) {
            border-radius: 30px;
        }

        @include bp($md) {
            padding-top: 2.5rem;
        }
        
        @include bp(1400px) {
            padding-left: 4rem;
            padding-right: 4rem;
        }

        &:hover .block-enriched-accordion__explore,
        &:focus-within .block-enriched-accordion__explore {
            .btn {
                color: var(--primary);
                background-color: var(--secondary);
            }
        }

        &__content,
        &__list {
            transition: all 0.3s ease-in-out;
            z-index: 1;
        }

        .row {
            position: relative;
            z-index: 1;

            &:not(.block-enriched-accordion__tab-content) {
                align-items: center;
            }
        }

        &.is-closed {
            color: var(--primary);
            background-color: var(--white);
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            .block-enriched-accordion {
                &__content {
                    /* height: 0; */
                    opacity: 0;
                }
    
                &__list {
                    opacity: 0;
                    transform: translateY(0);
                }

                &__tab-content {
                    height: 0;
                    overflow: hidden;
                    overflow: clip;
                }

                &__background-image {
                    opacity: 0;
                }

                &__trigger {
                    --text-color: var(--primary);
                    &::before {
                        transform: translate(-50%, -50%) rotate(90deg);
                    }

                    &::after {
                        transform: translate(-50%, -50%) rotate(0deg);
                    }
                }

                &__explore {
                    opacity: 1;
                    position: relative;
                    pointer-events: all;
                    text-align: right;

                    span {
                        color: var(--primary);
                    }
                }
            }

            &:before {
                position: absolute;
                content: '';
                height: 1px;
                width: calc(100% - 80px);
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                background-color: var(--primary);
                opacity: 0.3;

                @include bp($xl, true) {
                    width: 100vw;
                }
            }

        }

        &:first-child.is-closed {
            &:after {
                display: none;
            }
        }

        .is-trigger {
            cursor: pointer;
        }

        &.is-open {
            .btn {
                color: var(--white);
            }

            .btn--small-arrow {
                &:hover {
                    color: var(--secondary);
                }
            }

            .block-enriched-accordion__list {
                /* height: calc(100% + 70px); */

                @include bp($xl, true) {
                    height: initial;
                }
            }

            & + .block-enriched-accordion__item-wrapper {
                &:before {
                    display: none;
                }
            }
        }
    }

    &__tab-content {
        height: 0;
        overflow: visible;
        z-index: 1;
        position: relative;
        transition: height 0.3s ease-in-out;

        .content {
            font-size: clamp(16px, 2vw, 20px);
        }
    }

    &__list {
        transition: all 0.3s ease-in-out;
        background-color: var(--white);
        padding: 1.5rem;
        border-radius: 50px;
        --text-color: var(--primary);
        color: var(--text-color);
        opacity: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;

        @include bp($md, true) {
            border-radius: 30px;
        }

        @include bp($xl) {
            padding: 1.5rem 2.5rem;
        }

        @include bp($xl, true) {
            transform: translateY(0);
        }

        .btn {
            color: var(--primary) !important;

            &:hover {
                color: var(--secondary) !important;
            }
        }

        &-heading {
            font-family: Montserrat;
            font-size: clamp(18px, 2vw, 22px);
            font-weight: 600;
        }

        ul {
            list-style: none;
            padding-left: 0;
            width: 100%;

            li {
                position: relative;
                padding-left: 1.5rem;
                border-bottom: 1px solid rgba(56, 53, 81, 0.3);
                padding: 1rem 0 1rem 1.5rem;

                &::before {
                    content: "";
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translateY(-50%);
                    width: 0;
                    height: 0;
                    border-top: 0.5rem solid transparent;
                    border-bottom: 0.5rem solid transparent;
                    border-left: 0.5rem solid var(--secondary);
                }

                a {
                    font-family: 'Source Sans 3', sans-serif;
                    font-size: clamp(18px, 2vw, 22px);
                    font-weight: 400;
                    text-decoration: none;

                    &:hover {
                        color: var(--secondary);
                    }
                }

                span {
                    font-family: 'Source Sans 3', sans-serif;
                    font-size: clamp(18px, 2vw, 22px);
                    font-weight: 400;
                    text-decoration: none;
                }
            }
        }
    }
}

class EnrichedAccordionItem {
	item;
	headingHeight;
	contentHeight;
	listHeight;
	biggerHeight;

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

	init() {
		this.tabContent = this.item.querySelector('.block-enriched-accordion__tab-content');
		this.contentElement = this.item.querySelector('.block-enriched-accordion__content');
		this.listElement = this.item.querySelector('.block-enriched-accordion__content-wrapper');
		this.listElementChild = this.listElement ? this.listElement.firstElementChild : null;
		this.triggers = this.item.querySelectorAll('.is-trigger');

		this.contentHeight = this.contentElement ? this.contentElement.offsetHeight : 0;
		this.listHeight = this.listElementChild ? this.listElementChild.offsetHeight: 0;

		this.biggerHeight = Math.max(this.contentHeight, this.listHeight);

		if(window.innerWidth < 992) {
			this.biggerHeight = this.contentHeight + this.listHeight + 50;
		}

		this.triggers.forEach((trigger) => {
			trigger.addEventListener('click', (e) => {
				e.preventDefault();
				if(this.item.classList.contains('is-closed')) {
					this.open();
					this.closeAllOthers();
				} else {
					this.close();
				}
			});

			// if a trigger element is focused
			trigger.addEventListener('focus', () => {
				this.open();
				this.closeAllOthers();
			});
		});
	}

	open() {
		this.tabContent.style.height = `${this.biggerHeight}px`;
		this.item.classList.remove('is-closed');
		this.item.classList.add('is-open');
		// set aria-expanded to true for all triggers
		this.triggers.forEach((trigger) => {
			trigger.setAttribute('aria-expanded', 'true');
		});

		if(typeof ScrollTrigger !== 'undefined') {
			ScrollTrigger.refresh();
		}
	}

	close() {
		this.tabContent.style.height = '0px';
		this.item.classList.remove('is-open');
		this.item.classList.add('is-closed');
		// set aria-expanded to false for all triggers
		this.triggers.forEach((trigger) => {
			trigger.setAttribute('aria-expanded', 'false');
		});
		if(typeof ScrollTrigger !== 'undefined') {
			ScrollTrigger.refresh();
		}
	}

	closeAllOthers() {
		const allItems = this.item.parentElement.querySelectorAll('.block-enriched-accordion__item-wrapper');
		allItems.forEach((item) => {
			if(item !== this.item) {
				item.classList.remove('is-open');
				item.classList.add('is-closed');
				item.querySelector('.block-enriched-accordion__tab-content').style.height = '0px';
				// set aria-expanded to false for all triggers
				item.querySelectorAll('.is-trigger').forEach((trigger) => {
					trigger.setAttribute('aria-expanded', 'false');
				});
			}
		});
	}
}

class EnrichedAccordion {
	block;
	accordions = [];
	openFirstItem = false;

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

	init() {
		const accordionItems = this.block.querySelectorAll('.block-enriched-accordion__item-wrapper');
		accordionItems.forEach((item) => {
			this.accordions.push(new EnrichedAccordionItem(item));
		})

		// open first item on first page interaction
		if(this.accordions.length > 0) {
			const events = ['mousemove', 'touchstart', 'scroll'];
			events.forEach((event) => {
				document.addEventListener(event, () => {
					if(!this.openFirstItem) {
						this.accordions[0].open();
						this.openFirstItem = true;
					}
				}, { once: true });
			});
		}
	}
}

document.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('.block-enriched-accordion').forEach((block) => {
		new EnrichedAccordion(block);
	})
});

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/enriched-accordion",
    "title": "Enriched Accordion",
    "description": "Example block to be used as a template",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-enriched-accordion.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 - Enriched Accordion",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": "file:../../assets/css/enriched-accordion/block-enriched-accordion.css",
    "viewScript": ["enriched-accordion"]
}