<!--
    #VUE3 Todo

    <px-side-drawer toggle-class="my-trigger"  >

        <template #toggle="{isMenuVisible}">
            // this content will be placed in an otherwise invisible button
        </template>

        <template>
            // this will be rendered into the drawer which is a basic styled container by default.
            // For control over the drawer-class, set the drawer-class property.
        </template>

    </px-side-drawer>
-->
<template>
    <div>
        <px-toggle-button
            :class="toggleButtonClass"
            variant="icon"
            v-model:checked="visibleValue"
            :controls="drawerA11yId"
            mode="expander"
        >
            <px-icon :src="toggleIcon" />
        </px-toggle-button>

        <PxFloat
            v-model:visible="visibleValue"
            v-bind="modalProps"
            :overlayClass="[bem('overlay-base'), overlayClass]"
            :transition-name="'px-side-drawer__' + mode"
            variant="none"
        >
            <div :id="drawerA11yId" :class="bem({ mode })">
                <div :class="drawerClass">
                    <div :class="bem('top')">
                        <div :class="bem('close')">
                            <button
                                :class="closeButtonClass"
                                @click="visibleValue = false"
                                :aria-label="closeButtonLabel"
                            >
                                <px-icon :src="closeIcon" size="1.25" />
                            </button>
                        </div>
                    </div>
                    <div :class="bem('content')">
                        <slot name="default" />
                    </div>
                    <div :class="bem('bottom')">
                        <slot name="bottom" />
                    </div>
                </div>
            </div>
        </PxFloat>
    </div>
</template>

<script>
import PxBaseVisibleVue from '../bases/PxBaseVisible.vue';
import PxBaseUniqueId from '../bases/PxBaseUniqueId.vue';
import PxIcon from './PxIcon.vue';
import PxFloat from './PxFloat.vue';
import PxToggleButton from './PxToggleButton.vue';
import toggleIconDefault from '../assets/feather/menu.svg?url';

// TODO: #NUXT3 - use to be close-sm.svg
import closeIconDefault from '../assets/feather/x-circle.svg?url';

export default {
    name: 'px-side-drawer',
    components: {
        PxFloat,
        PxToggleButton,
        PxIcon,
    },
    mixins: [PxBaseVisibleVue, PxBaseUniqueId],
    props: {
        dockTo: { type: String, default: 'screen' }, // screen | parent

        // default icon used for the toggle (only shown in default toggle slot)
        toggleIcon: { type: String, default: toggleIconDefault },
        toggleIconSize: { default: null },

        // icon shown in the drawer by default (set to null to hide)
        closeIcon: { type: String, default: closeIconDefault },
        closeIconSize: { default: null },

        // custom classes
        toggleButtonClass: { type: String, default: 'px-side-drawer__icon-button' },
        closeButtonClass: { type: String, default: 'px-side-drawer__icon-button' },
        overlayClass: { type: String, default: 'px-side-drawer__overlay' },
        drawerClass: { type: String, default: 'px-side-drawer__drawer' },

        // PxModal (see PxModal for details)
        modalProps: { type: Object },

        // accessibility props
        closeButtonLabel: { type: String, default: 'Close' },

        // how it appears (from the top or side)
        mode: { type: String, default: 'side' },
    },
    // data() { return { b: 0 }; },
    computed: {
        drawerA11yId() {
            return this.uniqueId('drawer');
        },
    },
    // watch: {},
    // mounted() {},
    // methods: {},
};
</script>

<style lang="scss">
@use '../styles/px.scss' as *;
@use '@thinkpixellab-public/px-styles/src/modules/controls' as controls;

// @include vue-transition-fade('px-side-drawer__tr', $dur: 3000ms);

$dur: 400ms;

@include vue-transition('px-side-drawer__side') {
    @include vt-transition {
        @include transition(color, $dur: $dur);
        .px-side-drawer__overlay-base {
            @include transition(opacity, $dur: $dur);
        }
        .px-side-drawer__drawer {
            @include transition(transform, $dur: $dur);
        }
    }

    @include vt-hidden() {
        .px-side-drawer__overlay-base {
            opacity: 0;
        }
        .px-side-drawer__drawer {
            transform: translateX(100%);
        }
    }
}

@include vue-transition('px-side-drawer__top') {
    @include vt-transition {
        @include transition(color, $dur: $dur);
        .px-side-drawer__overlay-base {
            @include transition(opacity, $dur: $dur);
        }
        .px-side-drawer__drawer {
            @include transition(transform, $dur: $dur);
        }
    }

    @include vt-hidden() {
        .px-side-drawer__overlay-base {
            opacity: 0;
        }
        .px-side-drawer__drawer {
            transform: translateY(-100%);
        }
    }
}

.px-side-drawer {
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    min-width: 10px;

    &__overlay {
        background-color: clr(page-fg, $alpha: 0.1);
    }

    &__drawer,
    &__top,
    &__bottom {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1em;
        > section {
            display: flex;
            flex-direction: column;
        }
    }

    &__drawer {
        justify-content: space-between;
        width: 320px;
        max-width: 100vw;
        height: 100%;
        background-color: clr(page-bg);
        box-shadow: depth-shadow(15, 0.1);
        overflow: auto;
    }

    &__top {
        position: sticky;
        top: 0;
        background-color: clr(page-bg, $alpha: 0.5);
        backdrop-filter: blur(2px);
        z-index: 1;
    }
    &__content {
        flex: 1;
    }

    &__close {
        display: flex;
        justify-content: flex-end;
    }

    &__icon-button {
        @include controls.button-icon(
            (
                padding: 1em,
                min-height: 0,
                min-width: 0,
            )
        );
    }

    &--blur & {
        &__overlay {
            backdrop-filter: blur(10px);
        }
    }

    &--mode-top {
        height: auto;
    }

    &--mode-top & {
        &__drawer {
            width: 100vw;
            max-width: 100vw;
            height: auto;
        }
    }
}
</style>
