<template>
    <div
        class="mobile-fee-waiver-alert-container py-3 px-4 my-2"
        :class="[isExpanded ? 'expanded' : '']">
        <div
            class="mobile-fee-waiver-header d-flex align-items-center justify-content-between"
            @click="toggleIsExpanded">
            <span>
                {{ headerText }}
            </span>
        </div>
        <div class="mobile-fee-waiver-body">
            <div class="mobile-fee-waiver-copy">
                {{ subheaderText }}
            </div>
            <div class="mobile-fee-waiver-price-comp">
                <span class="mobile-fee-waiver-strikethrough-price">
                    {{ priceStrikethroughText }}
                </span>
                <span class="mobile-fee-waiver-free-price">{{ freePriceText }}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "mobile-fee-waiver-alert",
    props: {
        cmsWidgetName: String,
    },
    data() {
        return {
            isExpanded: true,
        };
    },
    computed: {
        headerText() {
            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
        },
        subheaderText() {
            return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
        },
        priceStrikethroughText() {
            return this.getCmsContent(this.cmsWidgetName, "FooterText");
        },
        freePriceText() {
            return this.getCmsContent(this.cmsWidgetName, "FooterText2");
        },
    },
    methods: {
        toggleIsExpanded() {
            this.setIsExpanded(!this.isExpanded);
        },
        setIsExpanded(newVal) {
            this.isExpanded = newVal;
        },
    },
    components: {},
};
</script>

<style lang="scss">
.mobile-fee-waiver-alert-container {
    background: $green-100;
    border-radius: 0.25em;
    border: 1px solid $green-400;

    .mobile-fee-waiver-header {
        font-weight: bold;

        span {
            flex-grow: 1;
            color: $black;
        }

        &::before {
            content: "";
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%230C7E47' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm3.7 6.171-4.449 4.45a.559.559 0 0 1-.8 0l-2.16-2.16a.563.563 0 0 1 .792-.8l1.76 1.76 4.066-4.042a.563.563 0 1 1 .792.8v-.008Z'/%3E%3C/svg%3E");
            width: 1rem;
            height: 1rem;
            display: inline-block;
            margin-right: 0.5rem;
        }

        &::after {
            content: "";
            transition: all 0.5s ease;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 9'%3E%3Cpath d='M7.99282 0.117702C7.75716 0.116049 7.53044 0.207797 7.3623 0.37286L0.255553 7.46878C0.0862976 7.63796 -0.00878906 7.86742 -0.00878906 8.10667C-0.00878906 8.34593 0.0862976 8.57539 0.255553 8.74457C0.424808 8.91374 0.654368 9.00879 0.893731 9.00879C1.13309 9.00879 1.36265 8.91374 1.53191 8.74457L7.99282 2.27378L14.4614 8.74457C14.6307 8.91205 14.8595 9.00547 15.0977 9.00428C15.3359 9.00308 15.5638 8.90737 15.7314 8.73819C15.8989 8.56901 15.9924 8.34022 15.9912 8.10216C15.99 7.8641 15.8942 7.63627 15.725 7.46878L8.6259 0.377963C8.45765 0.21088 8.22999 0.117289 7.99282 0.117702Z' fill='%230C7E47'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center center;
            width: 16px;
            height: 16px;
            display: inline-flex;
            position: relative;
        }
    }

    .mobile-fee-waiver-body {
        transition: all 500ms ease-out;
        visibility: hidden;
        overflow: hidden;
        max-height: 0;

        .mobile-fee-waiver-price-comp {
            margin-top: 0.5em;

            .mobile-fee-waiver-strikethrough-price {
                font-size: smaller;
                text-decoration: line-through;
            }

            .mobile-fee-waiver-free-price {
                display: inline-block;
                font-weight: bolder;
                border-radius: 1em;
                background-color: $green-300;
                padding: 0 0.5em;
                margin-inline-start: 0.5em;
            }
        }
    }

    &.expanded {
        .mobile-fee-waiver-header {
            &::after {
                transform: rotate(180deg);
            }
        }

        .mobile-fee-waiver-body {
            visibility: visible;
            max-height: none;

            border-top: 1px solid $green-400;
            padding-top: 0.5em;
            margin-top: 0.5em;
        }
    }
}
</style>
