let data;
window.addEventListener("load", async () => {
     data = await fetch("/wp-content/reviews_data.json").then(r => r.json())
    await import("https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.4/swiper-bundle.min.js");
    const css = `
        @import url(https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css);

        #rwembed-reviews {
            padding-top: 24px;
            text-align: center;
            overflow: hidden;
            width: 100vw;
            right: 0;
        }

        .swiper {
            width: 100vw;
            padding: 20px 0;
            overflow-x: hidden;
            transform: translateZ(0);
            backface-visibility: hidden;
            --rwembed-card-radius: 12px;
        }

        .swiper-slide-rwembed-wrapper {
            display: inline-block;
        }

        .rwembed-review-card {
            padding: 24px;
            --background-color: #fff;
            backface-visibility: hidden;
            box-sizing: border-box;
            max-width: 95%;
            transition: background .2s ease;
            font-size: 1.1rem;
            box-shadow: 0 0 20px #0002;
            border-radius: var(--rwembed-card-radius);
            font-family: "Open Sans", sans-serif;
            background: var(--background-color);
            display: inline-block;
            text-align: left;
            margin: 0;
        }

        @media screen and (max-width: 768px) {
            .rwembed-review-card {
                font-size: .9rem;
            }
        }


        .rwembed-review-card .rwembed-avatar-image {
            --size: 42px;
            border-radius: 50%;
            color: #4c8aad;
            line-height: var(--size);
            text-align: center;
            font-weight: bold;
            font-size: 18px;
            width: var(--size);
            height: var(--size);
            background: #e9e9e9;
            opacity: .8;
            margin-right: 12px;
        }

        .rwembed-review-card header {
            font-size: 1.1em;
            flex-direction: row;
            align-items: center;
            display: flex;
            color: #777;
        }

        .rwembed-review-card header * {
            vertical-align: middle;
        }

        .rwembed-review-card .rwembed-review-text {
            max-width: 300px;
            width: 100%;
            height: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 160%;
            position: relative;
        }

        .rwembed-review-text:after {
            position: absolute;
            content: ' ';
            display: block;
            bottom: 0;
            top: 0;
            z-index: 20;
            left: 0;
            right: 0;
            transition: box-shadow .2s ease;
            box-shadow: inset 0px -40px 15px -14px var(--background-color)
        }

        .rwembed-customer-details {
            display: inline-flex;
            flex-direction: column;
            line-height: 20px;
        }

        .rwembed-country {
            opacity: .7;
            font-size: .8em;
        }

        .rwembed-rating {
            font-size: 1.1em;
            user-select: none;
            cursor: default;
            color: #4c8aad;
        }

        hr {
            margin: 10px 0;
            border: none;
            background: none;
            border-bottom: 1px solid #ddd;
            width: 100%;
        }

        .flex-row {
            display: flex;
            margin-bottom: 20px;
            align-items: center;
        }

        .flex-col {
            display: flex;
            flex-direction: column;
        }

        .rwembed-info {

            text-align: center;
            font-weight: normal;
            display: inline-block;
            color: white;
            line-height: 20px;
            display: flex;
            justify-content: center;
            margin: 0 auto;
        }

        .rwembed-info * {
            vertical-align: middle;
        }

        .rwembed-info img.rwembed-business-logo {
            height: 146px;
            margin-right: 20px;
        }

        .rwembed-info svg {
            margin-right: 2px;
        }

        .rwembed-info h1 {
            font-weight: bold;
            width: 80%;
        }

        span.rwembed-avg-rating {
            margin-right: 20px;
            display: inline;
            color: white;
            font-size: 3em;
        }

        .rwembed-verified-company {
            background: #cee9fa;
            padding: 1px 10px;
            display: inline-block;
            font-size: .8em;
            line-height: 26px;
            border-radius: 2px;
            text-transform: uppercase;
            color: #2b668b;
        }

        .spacer {
            flex: 1;
        }

        .swiper-3d .swiper-slide-shadow {
            background: none !important;
            overflow: visible !important;
        }

       @media (min-width: 768px) {
            .swiper-slide:not(.swiper-slide-visible) .rwembed-review-card {
                --background-color: #e2e2e2;
            }

            .swiper-slide:not(.swiper-slide-visible) .rwembed-review-card * {
                filter: blur(2px);
            }
       }

        .swiper-cards .swiper-slide {
            overflow: visible !important;
            text-align: center;
        }

        .rwembed-read-all-reviews {
            width: 300px;
            font-size: 1.2em;
            border-radius: 0;
            font-weight: bold;
            padding: 14px;
            letter-spacing: 1px;
            margin: 0 auto;
        }

        @media screen and (max-width: 768px) {
            .col-on-mobile {
                flex-direction: column;
            }
            .rwembed-review-card {
                max-width: 100vw;
                box-sizing: border-box;
                padding: 42px;
                box-shadow: none;
                width: 100%;
            }
            .rwembed-date {
                flex-direction: column;
                align-items: start;
            }
        }
        @media screen and (min-width: 768px) {
            .swiper-button-prev {
                left: 20%;
            }
            .swiper-button-next {
                right: 20%;
            }
            .swiper-button-prev, .swiper-button-next {
                background: white;
                box-shadow: 0 2px 12px #0002;
                border-radius: 50%;
                width: 64px;
                height: 64px;
                color: #00b67a;
            }
        }

        .swiper-button-prev, .swiper-button-next {
            color: #4c8aad;
        }
        .swiper-button-prev:after, .swiper-button-next:after {
            font-size: 28px!important;
        }

        .rwembed-review-title {
            font-weight: 500;
            font-size: 1.4em;
            display: block;
            line-height: 150%;
            white-space: nowrap;
            max-width: 300px;
            text-overflow: ellipsis;
            overflow: hidden;
            margin-bottom: 10px;
        }

    `;

    const container = `
        <div class="rwembed-info">
            <br>
            <div class="flex-col">
                <div class="flex-row">
                     <br>
                     <br>
                     <br>
                    <span class="rwembed-avg-rating">%avg_rating_stars%</span>
                </div>
            </div>
        </div>
        <div class="swiper" style="width: auto">
            <div class="swiper-wrapper">
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        <br>
        <br>
    `
        .replace("%subtitle%", data.subtitle)
        .replace("%avg_rating%", data.avg_rating)
        .replace("%avg_rating_stars%", `&#9733;`.repeat(Math.round(data.avg_rating)));


    const template = `
        <div class="rwembed-review-card">
            <header>
                <div class="rwembed-avatar-image"></div>
                <div class="rwembed-customer-details">
                    <span class="rwembed-full-name"></span>
                </div>
            </header>
            <hr>
            <div class="flex-row rwembed-date">
                <span class="rwembed-rating"></span>
                <div class="spacer"></div>
            </div>
            <span class="rwembed-review-title"></span>
            <p class="rwembed-review-text"></p>
            <br>
        </div>
    `

    const root = document.getElementById("rwembed-reviews").parentElement;
    root.innerHTML = container;
    const style = document.createElement("style");
    style.innerHTML = css;
    root.appendChild(style);

    const reviews = Object.values(data.reviews);
    const loopedReviews = reviews.reduce((arr, rev, index) => {
        if (index === 0) {
            return [rev];
        }
        return [rev, ...arr, rev];
    }, [])

    function renderSlide (review) {
        const {
            customer,
            text,
            date,
            rating,
            title,
        } = review;

        const card = document.createElement("div");
        card.innerHTML = template;
        card.className = 'swiper-slide';
        const $ = (s) => card.querySelector(s);
        $(".rwembed-avatar-image").innerText = (
            customer.full_name
                .split(" ")
                .slice(0, 2)
                .map(s => s[0])
                .join("")
                .toUpperCase()
        );
        $(".rwembed-review-title").innerText = title;
        $(".rwembed-full-name").innerText = customer.full_name;
        $(".rwembed-review-text").innerHTML = text.replace(/\n/g, "<br>");
        const dateParts = date.split("T")[0].split("-");
        $(".rwembed-rating").innerHTML = `&#9733;`.repeat(Math.round(rating))
        return card
    }

    document.querySelector(".swiper-wrapper").append(...reviews.map(renderSlide))

    const swiper = new Swiper('.swiper', {
        direction: 'horizontal',
        loop: true,
        loopAdditionalSlides: 3,
        effect: window.matchMedia("(max-width: 768px)").matches ? "slide" : "cards",
        cardsEffect: {
            rotate: false,
            perSlideOffset: 15,
            slideShadows: false,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
        }
    });

    // Make so the cards all have the same height
    const texts = Array.from(document.querySelectorAll(".rwembed-review-card p"))
    const maxHeight = Math.max(...texts.map(t => t.offsetHeight))
    texts.forEach(t => t.style.height = maxHeight + "px")
});