<template>
    <div class="menu-modal-container">
        <button
            class="menu-button"
            type="button"
            :class="[isActive ? 'active' : '']"
            @click="toggleModal"
            aria-label="Hamburger Menu (modal window)">
            <span v-if="isActive">Close</span>
            <span v-else>Step {{ currentStepNumber }} of 4</span>
            <div class="bars ms-2">
                <div class="bar1"></div>
                <div class="bar2"></div>
                <div class="bar3"></div>
            </div>
        </button>
    </div>
    <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 }"
        @click.self="closeModal">
        <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">
                    <div class="step-grid">
                        <div class="bar-container">
                            <progress-bar class="bar-dots" :page="$route.name" :vertical="true" />
                            <span class="dot1"></span>
                            <span class="dot2"></span>
                            <span class="dot3"></span>
                            <span class="dot4"></span>
                        </div>
                        <div class="d-flex flex-column justify-content-between">
                            <div class="step-containers" v-for="step in steps" :key="step.number">
                                <span class="step-number">Step {{ step.number }} of 4</span>
                                <br />
                                <span
                                    class="step-name"
                                    :class="{ 'active-step': step.number === currentStepNumber }">
                                    {{ step.name }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Modal } from "bootstrap";
import { getProgressBarStep } from "@/constants/progress-bar-mapper";
import progressBar from "@/fmg-components/funnel-header/progress-bar/progress-bar";
import baseMixin from "@/mixins/base-mixin.js";

export default {
    name: "menuModal",
    data() {
        return {
            isActive: false,
        };
    },
    methods: {
        toggleModal() {
            if (this.isActive) {
                this.closeModal();
            } else {
                this.openModal();
            }
        },
        openModal() {
            Modal.getOrCreateInstance(document.getElementById("footerModal")).show();
        },
        closeModal() {
            Modal.getInstance(document.getElementById("footerModal")).hide();
        },
        show() {
            this.isActive = true;
            window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
        },
        hide() {
            var self = this;
            self.isActive = false;
        },
    },
    computed: {
        currentStepNumber() {
            return getProgressBarStep(this.$route.name);
        },
        steps() {
            return [
                { number: 1, name: "Vehicle" },
                { number: 2, name: "Quote" },
                { number: 3, name: "Schedule" },
                { number: 4, name: "Review" },
            ];
        },
    },
    components: {
        progressBar,
    },
};
</script>

<style lang="scss" scoped>
.menu-modal-container {
    button {
        border: none;
        color: $blue;
        font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
        font-weight: 600;
        font-size: 0.875rem;
        &.menu-button {
            width: auto;
            height: auto;
            border-radius: 1.5rem;
            box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
            background-color: $white;
            position: relative;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding: 0.15rem 0.5rem; //Required to prevent 'squish' on iPhone
            z-index: 1050;
            @include media-breakpoint-up(md) {
                padding: 0.25rem 1rem;
            }
            &.active .bar1 {
                transform: rotate(-45deg) translate(-3px, 8px);
            }
            &.active .bar2 {
                opacity: 0;
            }
            &.active .bar3 {
                transform: rotate(45deg) translate(-3px, -8px);
            }
            .bars {
                width: 1.5rem;
                height: 1.5rem;
                display: flex;
                justify-content: space-around;
                flex-direction: column;
                scale: 0.75;
                .bar1,
                .bar2,
                .bar3 {
                    width: 1.5rem;
                    height: 2px;
                    background-color: $blue;
                    margin: 1px 0;
                    transition: 0.25s;
                }
            }
            .step-numbers {
                font-size: 0.875rem;
                margin-right: 0.5rem;
                @include media-breakpoint-up(md) {
                    font-size: 1rem;
                }
            }
        }
    }
}
.modal {
    &.menu-modal {
        .modal-dialog {
            position: fixed;
            bottom: 0;
            right: 0;
            height: calc(100% - 68px);
            width: 100vw; // or set a max-width if you want a drawer effect
            max-width: 294px;
            margin: 0;
            transform: translateX(100%);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1050;
            @include media-breakpoint-up(md) {
                height: calc(100% - 102px);
                top: 102px;
            }
        }
        &.show .modal-dialog {
            transform: translateX(0);
        }
        background-color: rgba(0, 0, 0, 0.5);
        height: calc(100% - 68px);
        top: 68px;
        border-top: 1px solid $gray-300;
        overflow-x: visible;
        overflow-y: visible;
        @include media-breakpoint-up(md) {
            height: calc(100% - 102px);
            top: 102px;
        }
        .modal-body {
            padding: 2rem;
            display: flex;
            align-items: center;
            .ccpa-icon {
                width: 2.0625rem;
                height: 1rem;
                margin-left: 0.5rem;
            }
            :deep(.navigation-link) {
                margin-bottom: 1.5rem;
            }
            .step-grid {
                display: grid;
                max-width: 140px;
                grid-template-columns: 1fr 1fr;
                .step-containers {
                    line-height: 1;
                }
                .bar-container {
                    width: 24px;
                    position: relative;
                    .dot1,
                    .dot2,
                    .dot3,
                    .dot4 {
                        position: absolute;
                        width: 22px;
                        height: 22px;
                        background-color: $white;
                        border-radius: 50rem;
                        border: 1px solid $gray;
                        left: 1px;
                    }
                    .dot1 {
                        top: 1px;
                    }
                    .dot2 {
                        top: 114px;
                    }
                    .dot3 {
                        top: 227px;
                    }
                    .dot4 {
                        top: 332px;
                    }
                }
                .step-number {
                    font-size: 0.75rem;
                }
                .step-name {
                    font-size: 1.25rem;
                }
                .active-step {
                    font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
                    font-weight: 600;
                }
            }
        }
        .modal-fullscreen {
            width: 100vw;
        }
        .modal-footer {
            border-top: none;
            padding: 2rem;
        }
        .menu-modal-container {
            position: absolute;
            padding: 1.47rem 0 1.47rem 1.47rem;
            right: 0;
            top: -5rem;
            button {
                border: none;
                &.menu-button {
                    width: 1.5rem;
                    height: 1.5rem;
                    border-radius: 50%;
                    box-shadow: none;
                    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: 1056;
                    .bars {
                        width: 1.5rem;
                        height: 1.5rem;
                        display: flex;
                        justify-content: space-around;
                        flex-direction: column;
                        .bar1,
                        .bar2,
                        .bar3 {
                            width: 1.5rem;
                            height: 2px;
                            background-color: $blue;
                            margin: 1px 0;
                            transition: 0.25s;
                        }
                        &.active .bar1 {
                            transform: rotate(-45deg) translate(-3px, 8px);
                        }
                        &.active .bar2 {
                            opacity: 0;
                        }
                        &.active .bar3 {
                            transform: rotate(45deg) translate(-3px, -8px);
                        }
                    }
                }
            }
        }
        //.modal-backdrop styles are in common-styles.scss
    }
}
</style>
