<template>
    <div class="row" :style="`padding-bottom: ${paddingHeight}px`"></div>
    <footer class="footer container-fluid fixed-bottom g-5 bg-light py-4" id="infoBox">
        <div class="row d-flex flex-row-reverse align-items-center vw-100">
            <div class="col button-col d-flex" id="stacked">
                <buttonMain
                    ref="buttonMain"
                    isPrimary
                    :buttonText="buttonText"
                    loaderColor="white"
                    :class="isForwardActionDisabled && 'form-test-invalid'"
                    :aria-disabled="isForwardActionDisabled"
                    :isDisabled="isForwardActionDisabled"
                    @click-event="buttonClick"
                    data-bs-target="#footerModal"
                    data-bs-dismiss="modal" />
            </div>
            <div v-if="!isBackButtonHidden" class="col-auto link-col py-1 text-break">
                <textLink
                    linkType="navigation"
                    :text="backLink"
                    @click-event="linkClick"
                    href="javascript:void(0)"
                    data-bs-target="#footerModal"
                    data-bs-dismiss="modal" />
            </div>
        </div>
    </footer>
</template>

<script>
import textLink from "@/ux-components/text-link/text-link";
import buttonMain from "@/ux-components/button-main/button-main";

export default {
    name: "siteFooter",
    props: {
        isForwardActionDisabled: Boolean,
        isBackButtonHidden: { type: Boolean, default: false },
        cmsWidgetName: String,
    },
    components: {
        textLink,
        buttonMain,
    },
    data() {
        return {
            paddingHeight: 0,
            customButtontext: "",
        };
    },
    mounted() {
        this.paddingHeight = this.getFooterInfoBoxHeight() + 24;
        this.$nextTick(() => {
            window.addEventListener("resize", this.onResize);
        });
    },
    beforeUnmount() {
        window.removeEventListener("resize", this.onResize);
    },
    unmounted() {
        document.onkeydown = null;
    },
    computed: {
        backLink() {
            return this.getCmsContent(this.cmsWidgetName, "BackButtonText");
        },
        buttonText() {
            return this.customButtontext
                ? this.customButtontext
                : this.getCmsContent(this.cmsWidgetName, "ForwardButtonText");
        },
    },
    methods: {
        onResize() {
            this.paddingHeight = this.getFooterInfoBoxHeight();
        },
        updateButtonText(newText) {
            this.customButtontext = newText;
        },
        removeLoader() {
            this.$refs.buttonMain.removeLoader();
            document.onkeydown = function (e) {
                return true;
            };
        },
        buttonClick() {
            //prevent keyboard input after button click
            document.onkeydown = function (e) {
                return false;
            };
            this.$emit("ForwardClicked");
        },
        linkClick() {
            this.$emit("BackClicked");
        },
    },
};
</script>

<style lang="scss" scoped>
.footer {
    display: flex;
    a {
        display: flex;
        justify-content: center;
    }
    .col,
    .col-auto,
    .col button {
        width: 100%;
    }
    @media only screen and (min-width: 340px) {
        .col,
        .col-auto,
        .col button {
            width: auto;
            justify-content: flex-end;
        }
        .btn-primary {
            width: auto;
        }
        a {
            display: flex;
            justify-content: flex-start;
        }
    }
    & > .container-fluid {
        overflow-x: visible; // needed to fix hidden footer on some iphones
    }
}
</style>
