<template>
    <footer class="site-footer">
        <p class="p-small">&copy; {{ currentYear }} Nic Wands</p>

        <button class="info-button" @click="infoWindowOpen = !infoWindowOpen">
            <img src="/images/info.gif" alt="Info" />
        </button>

        <transition name="footer-info">
            <div
                v-if="infoWindowOpen && info"
                class="info theme-red"
                ref="infoWindow"
            >
                <button class="close window" @click="infoWindowOpen = false">
                    Close X
                </button>

                <div class="content window">
                    <strapi-content :content="info" />
                </div>
            </div>
        </transition>
    </footer>
</template>

<script setup>
import { onClickOutside } from '@vueuse/core'
import { computed, ref } from 'vue'

const props = defineProps({
    info: Object,
})

const infoWindow = ref()
const infoWindowOpen = ref(false)

onClickOutside(infoWindow, () => {
    infoWindowOpen.value = false
})

const currentYear = computed(() => {
    return new Date().getFullYear()
})
</script>

<style lang="scss">
.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--layout-margin);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    .info-button {
        cursor: pointer;

        img {
            width: desktop-vw(30px);
            height: auto;
        }
    }

    .info {
        position: fixed;
        bottom: var(--layout-margin);
        right: var(--layout-margin);
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: desktop-vw(10px);
        pointer-events: none;

        .window {
            background: var(--theme-bg);
            color: var(--theme-fg);
            pointer-events: all;

            &.close {
                padding: desktop-vw(9px);
                border-radius: desktop-vw(16px);
                cursor: pointer;
                @include label;
            }
            &.content {
                width: desktop-vw(250px);
                padding: var(--layout-margin);
                border-radius: desktop-vw(10px);

                p,
                a {
                    @include p-small;
                }
            }
        }

        &.footer-info-enter-active,
        &.footer-info-leave-active {
            transition-duration: 400ms;

            .close {
                clip-path: inset(0% 0% 0% 0%);
                transition: clip-path 300ms 100ms var(--ease-out-expo);
            }
            .content {
                clip-path: inset(0% 0% 0% 0% round 5px);
                transition: clip-path 300ms var(--ease-out-expo);
            }
        }
        &.footer-info-leave-active {
            .close {
                transition-delay: 0ms;
            }
            .content {
                transition-delay: 100ms;
            }
        }
        &.footer-info-enter-from,
        &.footer-info-leave-to {
            .close {
                clip-path: inset(100% 0% 0% 0%);
            }
            .content {
                clip-path: inset(100% 0% 0% 100% round 5px);
            }
        }
    }

    @include mobile() {
        .info-button {
            img {
                width: mobile-vw(30px);
            }
        }
        .info {
            gap: mobile-vw(10px);

            .window {
                &.close {
                    padding: mobile-vw(9px);
                    border-radius: mobile-vw(16px);
                }
                &.content {
                    border-radius: mobile-vw(10px);
                    width: calc(100vw - (2 * var(--layout-margin)));
                }
            }
        }
    }
}
</style>
