<template>
    <div>
        <footer
            id="infoBox"
            class="footer container-fluid g-5 my-5 px-0">
            <div
                class="row d-flex vw-100 mx-0"
                :class="[
                    isStackedVertically
                        ? 'flex-column align-items-stretch'
                        : 'flex-row-reverse align-items-center',
                ]">
                <div
                    id="stacked"
                    class="col button-col d-flex px-0">
                    <buttonMain
                        v-if="!isForwardButtonHidden"
                        ref="buttonMain"
                        variant="navigation"
                        :buttonText="buttonText"
                        :class="
                            (disableForwardAction || isForwardActionDisabled) &&
                            'form-test-invalid'
                        "
                        :aria-disabled="disableForwardAction || isForwardActionDisabled"
                        :isDisabled="disableForwardAction || isForwardActionDisabled"
                        data-test-id="site-footer-main-button"
                        @clickEvent="buttonClick" />
                </div>
                <div
                    v-if="!isBackButtonHidden"
                    class="col-auto link-col py-1 px-0 text-break">
                    <textLink
                        linkType="navigation"
                        :text="backLink"
                        href="javascript:void(0)"
                        data-test-id="site-footer-back-button"
                        @clickEvent="linkClick" />
                </div>
            </div>
        </footer>
    </div>
</template>

<script>
import textLink from '@/ux-components/text-link/text-link.vue';
import buttonMain from '@/ux-components/button-main/button-main.vue';
import showIssLoadingModal from '@/helpers/loading-modal-helper';

export default {
    name: 'site-footer',
    components: {
        textLink,
        buttonMain
    },
    props: {
        isForwardActionDisabled: Boolean,
        isBackButtonHidden: { type: Boolean, default: false },
        isForwardButtonHidden: { type: Boolean, default: false },
        isForwardButtonNavigationDisabled: { type: Boolean, default: false },
        cmsWidgetName: String,
        isStackedVertically: { type: Boolean, default: false }
    },
    emits: ['backClicked', 'forwardClicked'],
    data() {
        return {
            paddingHeight: 0,
            customButtontext: '',
            disableForwardAction: false
        };
    },
    computed: {
        backLink() {
            return this.getCmsContent(this.cmsWidgetName, 'BackButtonText');
        },
        buttonText() {
            return this.customButtontext
                ? this.customButtontext
                : this.getCmsContent(this.cmsWidgetName, 'ForwardButtonText');
        }
    },
    mounted() {
        this.paddingHeight = this.getFooterInfoBoxHeight() + 24;
    },
    methods: {
        onResize() {
            this.paddingHeight = this.getFooterInfoBoxHeight();
        },
        updateButtonText(newText) {
            this.customButtontext = newText;
        },
        buttonClick() {
            if ((!this.disableForwardAction && !this.isForwardActionDisabled && !this.isForwardButtonNavigationDisabled)) {
                showIssLoadingModal(true);
            }
            this.$emit('forwardClicked');
        },
        linkClick() {
            this.$emit('backClicked');
        },
        disableForwardButton() {
            this.disableForwardAction = true;
        },
        enableForwardAction() {
            this.disableForwardAction = false;
        }
    }
};
</script>

<style lang="scss" scoped>
.footer {
    display: flex;
    overflow: visible;
    a {
        display: flex;
        justify-content: center;
    }
    .col,
    .col-auto {
        width: 100%;
    }
    @media only screen and (min-width: 340px) {
        .col,
        .col-auto {
            width: auto;
            justify-content: flex-end;
        }
        .btn-navigation {
            width: auto;
        }
        a {
            display: flex;
            justify-content: flex-start;
        }
    }

    & > .container-fluid {
        overflow-x: visible; // needed to fix hidden footer on some iphones
    }
    div.flex-column {
        .btn-navigation {
            width: 100%;
            justify-content: center;
        }
        div.link-col {
            display: flex;
            justify-content: center;
            margin-top: 1.25rem;
        }
    }
}
</style>
