<template>
    <div class="menu-modal-container">
        <button class="menu-button" type="button" :class="[isActive ? 'active' : '']" data-bs-toggle="modal" data-bs-target="#footerModal" aria-label="Hamburger Menu (modal window)">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
        </button>
    </div>
    <!-- Modal -->
    <div class="modal menu-modal fade" data-bs-backdrop="false" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" v-on="{ 'show.bs.modal' : show, 'hide.bs.modal' : hide }">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            <div class="modal-header visually-hidden">
                <h5 class="modal-title" id="footerModalLabel">Footer Navigation</h5>
            </div>
            <div class="modal-body d-flex flex-column">
                <textLink
                linkType="navigation"
                text="Terms of service"
                href="//www.safelite.com/terms-of-use"
                target="_blank" />
                <textLink
                linkType="navigation"
                text="Your privacy choices"
                href="//www.safelite.com/privacy-center"
                target="_blank">
                <template v-slot:after-text>
                    <img
                    class="ccpa-icon"
                    data-id="ccpa-icon"
                    src="~@/assets/img/icons/ccpa-icon.svg"
                    alt="Your privacy choices" />
                </template>
            </textLink>
            <textLink
            linkType="navigation"
            text="Warranty"
            href="//www.safelite.com/national-lifetime-warranty"
            target="_blank" />
            <textLink
            linkType="navigation"
            text="Notice at collection"
            href="https://www.safelite.com/ccpa-privacy-policy"
            target="_blank" />
        </div>
        <div class="modal-footer d-flex justify-content-start">
            &copy; {{new Date().getFullYear()}} Safelite Group
        </div>
    </div>
</div>
</div>
</template>

<script>
import textLink from "@/ux-components/text-link/text-link";
export default {
    name: 'menuModal',
    data() {
        return {
            isActive: false,
            currentFooterAndHeaderHeight: 0,
        };
    },
    methods: {
        show() {
            this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 56;
            this.isActive = true;
            document.querySelector('.fade-on-route-transition').scrollTo({
                top: 0,  behavior: 'instant'
            });
        },
        hide() {
            var self = this;
            self.isActive = false;
        },
    },
    components: {
        textLink,
    }
}
</script>

<style lang="scss" scoped>
.menu-modal-container {
    position: absolute;
    padding: 1.47rem 1rem 1.47rem 1.47rem;
    right: 0;
    button {
        border: none;
        &.menu-button {
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 50%;
            box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);
            background-color: $white;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 0;//Required to prevent 'squish' on iPhone
            z-index: 1060;
            .bar1,
            .bar2,
            .bar3 {
                width: 14px;
                height: 2px;
                background-color: $blue;
                margin: 1px 0;
                transition: 0.25s;
            }
            &.active .bar1 {
                transform: rotate(-45deg) translate(-3px, 3px);
            }
            &.active .bar2 {opacity: 0;}
            &.active .bar3 {
                transform: rotate(45deg) translate(-3px, -3px);
            }
        }
    }
}
.modal {
    &.menu-modal {
        max-width: 576px;
        left: auto;
        height: calc(100% - 56px);
        top: 56px;
        border-top: 1px solid $gray-300;
        overflow-x: visible;
        overflow-y: visible;
        .modal-body {
            padding: 2rem;
            .ccpa-icon {
                width: 2.0625rem;
                height: 1rem;
                margin-left: 0.5rem;
            }
        }
        .modal-fullscreen {
            width: 100vw;
            max-width: 576px;
        }
        .navigation-link {
            margin-bottom: 1.5rem;
        }
        .modal-footer {
            border-top: none;
            padding: 2rem;
        }
        .menu-modal-container {
            position: absolute;
            padding: 1.47rem 1rem 1.47rem 1.47rem;
            right: .5rem;
            top: -5.0rem;
            button {
                border: none;
                &.menu-button {
                    width: 1.5rem;
                    height: 1.5rem;
                    border-radius: 50%;
                    box-shadow: none;
                    background-color: $white;
                    position: relative;
                    right: -.5rem;
                    top: .5rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    padding: 0; //Required to prevent 'squish' on iPhone
                    z-index: 1056;
                    .bar1,
                    .bar2,
                    .bar3 {
                        width: 14px;
                        height: 2px;
                        background-color: $blue;
                        margin: 1px 0;
                        transition: 0.25s;
                    }
                    &.active .bar1 {
                        transform: rotate(-45deg) translate(-3px, 3px);
                    }
                    &.active .bar2 {
                        opacity: 0;
                    }
                    &.active .bar3 {
                        transform: rotate(45deg) translate(-3px, -3px);
                    }
                }
            }
        }
        //.modal-backdrop styles are in common-styles.scss
    }
}
</style>
