<!--
    Describe this component...
-->
<template>
    <div :class="bem()">
        <div :class="bem('dialog-buttons')">
            <button :class="bem('button')" @click="visible = true">Toggle Dialog</button>

            <px-float v-model:visible="visible" variant="dialog gray" :disablesScroll="false">
                This is some content

                <button :class="bem('button')" @click="innerVisible = true">Inner Toggle</button>

                <!-- inner dialogs need to be used with a portal if they are contained -->
                <px-float v-model:visible="innerVisible" variant="dialog blur">
                    This is some inner content

                    <button :class="bem('button')" @click="innerInnerVisible = true">
                        Inner Inner Toggle
                    </button>

                    <!-- inner dialogs need to be used with a portal if they are contained -->
                    <px-float v-model:visible="innerInnerVisible" variant="dialog blur gray">
                        Wow this is deep
                    </px-float>
                </px-float>
            </px-float>
        </div>

        <div :class="bem('position-buttons')">
            <div :class="bem('button')" @click="showPosition('top')">Top</div>
            <px-float
                v-model:visible="positionVisible"
                :placement="'top-start'"
                :disablesScroll="false"
                :offset="10"
            >
                Position: {{ position }}
            </px-float>
        </div>

        <!-- mouse -->
        <div :class="bem('button')" @click="showMouseFloat">Mouse</div>
        <px-float ref="mouseFloat" :placement="'bottom-start'" variant="dialog sm">
            Positioned with showAtCursor! (Note: needs to be done pogramatically because we only
            have access to mouse coordinates in a mouse event.)
        </px-float>
    </div>
</template>

<script>
import PxFloat from '../../components/PxFloat.vue';
export default {
    name: 'demo-px-swiper',
    components: { PxFloat },
    // mixins: [ Mixin ],
    // props: { a: { type: Boolean, default: false } },
    data() {
        return {
            visible: false,
            innerVisible: false,
            innerInnerVisible: false,
            position: 'top',
            positionVisible: false,
        };
    },
    // computed: {},
    // watch: {},
    // mounted() {},
    methods: {
        showPosition(pos) {
            this.position = pos;
            this.positionVisible = true;
        },
        showMouseFloat(e) {
            this.$refs.mouseFloat.showAtCursor(e);
        },
    },
};
</script>

<style lang="scss">
@use '../../styles/px.scss' as *;

.demo-px-swiper {
    min-height: 500vh;
    @include debug-zebra(rgba(black, 0.03), rgba(black, 0));
    &__button {
        position: relative;
        margin-top: 20px;
        margin-left: 20px;
        @include button();
        &:focus {
            outline: 2px dashed accent();
            outline-offset: 5px;
        }
    }
    &__position-buttons {
        @include center(0%, 50%);
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
}
</style>
