<template>
    <div class="hy-header" :class="{ isFloating, doCoverShadow }">
        <hy-flex-container id="visual" :wrap="false" :allowBreak="false">
            <slot name="left" v-if="$slots.left" />

            <div id="headline" :class="{ 'hy-extend-full': doExtendHeadline }" v-if="headline != null || icon != null">
                <h3>
                    <i v-if="icon" :class="`${icon}`"></i>
                    <span v-if="headline" class="hy-reset">{{ headline }}</span>
                </h3>
            </div>

            <slot />
            <slot name="right" />
        </hy-flex-container>
    </div>
</template>

<script>
import { useMediaQuery } from "@vueuse/core";

export default {
    name: "HyHeader",
    props: {
        headline: {
            type: String,
            default: null,
        },
        icon: {
            type: String,
            default: null,
        },
        doCoverShadow: {
            type: Boolean,
            default: true,
        },
        floating: {
            type: Boolean,
            default: true,
        },
        doExtendHeadline: {
            type: Boolean,
            default: true,
        },
        maxWidth: {
            type: String,
            default: "1400px",
        },
        resizeTo: {
            type: Number,
            default: 95,
        },
        zIndex: {
            type: Number,
            default: 50,
        },
        switchToMobileAt: {
            type: Number,
            default: 850,
        },
    },
    data() {
        return {
            isDesktop: useMediaQuery(`(min-width: ${this.switchToMobileAt}px)`),
        };
    },
    computed: {
        isFloating() {
            return this.isDesktop && this.floating;
        },
    },
};
</script>

<style lang="scss">
.hy-header {
    position: sticky;
    top: 0;
    background-color: var(--hy-body-bg-color);
    z-index: v-bind(zIndex);
    --resize-to: calc(v-bind("resizeTo") * 1%);

    #visual {
        background-color: var(--hy-section-bg-color);
        margin: 0;
        min-height: 60px;

        #headline {
            h3 {
                margin: 0;
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            span:nth-child(2) {
                margin-left: var(--hy-flex-gap);
            }
        }
    }

    // Desktop (if floating is enabled)
    &.isFloating {
        padding-top: 15px;
        width: 100%;

        #visual {
            width: min(v-bind("maxWidth"), var(--resize-to));
            margin: auto;
            border-radius: var(--hy-section-border-radius);
            padding: 0 var(--hy-element-padding);
        }

        &.doCoverShadow {
            box-shadow: var(--hy-header-shadow-cover);
        }
    }

    // Mobile (or if floating is disabled)
    &:not(.isFloating) {
        width: 100%;

        #visual {
            padding: 0 calc((100% - min(v-bind("maxWidth"), var(--resize-to))) / 2);

            &::after {
                content: "";
                width: 100%;
                height: 20px;
                position: absolute;
                left: 0;
                bottom: 0;
                z-index: -1;
                box-shadow: var(--hy-tabbar-shadow);
            }
        }
    }
}
</style>
