<meta charset="UTF-8">

<style>
    body{
        overflow: hidden;
    }
</style>
    <oda-dropdown-tester></oda-dropdown-tester>
<script type="module">
    import '../../../oda.js';
    import "../containers.js";
    ODA({is:'oda-dropdown-tester',
        template:`
            <style>
                :host{
                    @apply --vertical;
                    @apply --flex;
                }
            </style>
            <label>Use parent width</label>
            <input type="checkbox" ::checked="useParentWidth">
            <div class="flex horizontal">
                <div ~for="type" class="flex vertical shadow" style="margin: 12px; border: 1px solid transparent; border-radius: 4px; align-items: center;">
                    <h3>{{$for.item}}</h3>
                    <div class="flex vertical" style=" justify-content: space-around;">
                        <button ~for="modes" style="width: 100px; margin: 20px;" @tap="run($event, $for.item, $$for.item)">{{Object.values($$for.item)}}</button>
                    </div>
                </div>
            </div>
        `,
        useParentWidth: false,
        type: ['No parent', 'Parent', 'Parent + intersect'],
        modes: [{align: 'left', drop: 'up'}, {align: 'left', drop: 'down'}, {align: 'right', drop: 'up'}, {align: 'right', drop: 'down'}],
        async run(e, type, align){
            try {
                const res = await ODA.showDropdown('oda-test', { icon: 'icons:warning', iconSize: 100},
                    {useParentWidth: this.useParentWidth, animation: 500, parent: type.startsWith('Parent')?e.target:null, intersect: type.includes('intersect') ,
                        align: align.align, drop: align.drop, title: type+` (${Object.values(align)})`, icon: 'icons:info'});
                console.log(res);
            }
            catch (e) {
                // console.error(e);
            }
        }
    })
    ODA({is: 'oda-test', imports: '@oda/button',
        template:`
            <style>
                :host{
                    @apply --vertical;
                    align-items: center;
                }
            </style>
            <oda-button :icon-size :icon></oda-button>
            <div class="vertical" style="overflow: auto">
                <h4 ~for="5">Запись № {{$for.item}}</h4>
            </div>

       `,
        iconSize: 24,
        icon: ''
    })
</script>
