<template>
    <section class="sf-sliding-section" :class="{ 'is-active': isActive }">
        <div ref="static" class="sf-sliding-section__static">
            <!-- @slot Use this slot to place static content. -->
            <slot name="static" />
        </div>
        <div class="sf-sliding-section__sliding">
            <div class="sf-sliding-section__mobile-bar">
                <!-- @slot Use this slot to replace close icon -->
                <slot name="close" v-bind="{ closeHandler }">
                    <SfButton
                        class="sf-button--pure sf-sliding-section__close"
                        @click="closeHandler"
                    >
                        <SfIcon icon="cross" size="14px" />
                    </SfButton>
                </slot>
            </div>
            <!-- @slot Use this slot to place sliding content. -->
            <slot name="sliding" v-bind="{ isActive }" />
        </div>
    </section>
</template>
<script>
    import SfIcon from '../../atoms/SfIcon/SfIcon.vue';
    import SfButton from '../../atoms/SfButton/SfButton.vue';
    import {
        mapMobileObserver,
        unMapMobileObserver,
    } from '../../utilities/mobile-observer';
    import { isClient } from '../../utilities/helpers';
    // eslint-disable-next-line import/no-unassigned-import
    export default {
        name: 'SfSlidingSection',
        components: {
            SfIcon,
            SfButton,
        },
        data() {
            return {
                isActive: false,
                hasScrollLock: false,
                hammer: undefined,
                hasStaticHeight: false,
            };
        },
        computed: {
            ...mapMobileObserver(),
        },
        watch: {
            isMobile(mobile) {
                if (!isClient) return;
                if (!mobile) {
                    this.isActive = false;
                    this.hasScrollLock = false;
                    this.hammer.set({ enable: false });
                    return;
                }
                this.hasScrollLock = true;
                this.hammer.set({ enable: true });
            },
            isActive(active) {
                if (!isClient) return;
                if (!active) {
                    this.hasStaticHeight = false;
                    if (!this.isMobile) {
                        this.hasScrollLock = false;
                        return;
                    }
                    this.hasScrollLock = true;
                    return;
                }
                this.hasScrollLock = false;
            },
            hasScrollLock(scrollLock) {
                if (!isClient) return;
                if (!scrollLock) {
                    this.scrollUnlock();
                    return;
                }
                this.scrollLock();
            },
        },
        onMounted() {
            import('hammerjs').then((h) => {
                const Hammer = h.default;
                this.hammer = new Hammer(document, {
                    enable: false,
                }).on('pan', this.touchHandler);
            });
        },
        beforeDestroy() {
            this.scrollUnlock();
            unMapMobileObserver();
            this.hammer.destroy();
        },
        methods: {
            touchPreventDefault(e) {
                e.preventDefault();
            },
            scrollLock() {
                window.scrollTo(0, 0);
                document.body.classList.add(
                    'sf-sliding-section--has-scroll-lock',
                );
                window.addEventListener('touchmove', this.touchPreventDefault, {
                    passive: false,
                });
            },
            scrollUnlock() {
                document.body.classList.remove(
                    'sf-sliding-section--has-scroll-lock',
                );
                window.removeEventListener(
                    'touchmove',
                    this.touchPreventDefault,
                    {
                        passive: false,
                    },
                );
            },
            touchHandler(event) {
                const { direction, isFinal } = event;
                if (
                    !this.hasStaticHeight &&
                    this.$refs.static.offsetHeight > 0
                ) {
                    this.hasStaticHeight = true;
                    this.$refs.static.style.setProperty(
                        'height',
                        `${this.$refs.static.offsetHeight}px`,
                    );
                }
                if (!this.isActive && isFinal && direction === 8) {
                    this.isActive = true;
                }
                if (this.isActive && isFinal && direction === 16) {
                    this.isActive = false;
                }
            },
            closeHandler() {
                this.isActive = false;
            },
        },
    };
</script>

<style lang="scss">
    @import '@borngroup/lightswitch-storefront-ui-shared/styles/components/molecules/SfSlidingSection.scss';
</style>
