<!--
    <demo-picker :demos="['PxDatePicker', 'PxDropdown']">
        <template #default="{ demoComponent }">
            <component :is="demoComponent" />
        </template>
    </demo-picker>
-->
<template>
    <div :class="bem()">
        <div :class="bem('main')">
            <slot name="default" :demoComponent="demoComponent"></slot>
        </div>
    </div>
</template>

<script>
import { getQueryParam } from '../../utils/utils.js';

export default {
    name: 'demo-picker',
    // mixins: [],
    // components: {
    //     MyComponent
    // },
    props: {
        demos: { type: Array, default: null },
        storageKey: { type: String, default: 'demo' },
    },
    data() {
        return {
            demoComponent: null,
            dropdownVisible: false,
        };
    },
    mounted() {
        const demo = this.getDemoSelection();
        if (demo && demo.trim()) {
            this.setDemoSelection(demo);
        }

        this.demoComponent = demo;
        console.log(this.demoComponent);

        document.addEventListener('keydown', e => {
            if (e.key == 'F1') {
                this.dropdownVisible = !this.dropdownVisible;
            }
        });
    },
    // watch: {},
    // computed: {}
    methods: {
        setDemoSelection(demo) {
            if (window?.localStorage) {
                window.localStorage.setItem(this.storageKey, demo);
            }
        },
        getDemoSelection() {
            return getQueryParam('demo') || window?.localStorage?.getItem(this.storageKey);
        },
    },
};
</script>

<style lang="scss">
.demo-picker {
    &__main {
        display: grid;
        min-width: 100vw;
        min-height: 100vh;
    }

    &__toolbar {
        background-color: #23272e;
    }
}
</style>
