<template>
    <div class="wrap">
        <Sidebar v-model:visible="filesSidebarVisible" class="p-sidebar-lg">
            <Listbox v-model="selectedFile" :options="files" optionLabel="file">
                <template #option="slotProps">
                    <div>
                        <span>{{ slotProps.option.file.name }}</span>
                        <Chip :label="slotProps.option.status" />
                    </div>
                </template>
            </Listbox>
        </Sidebar>

        <div class="p-d-flex p-flex-row p-jc-between p-ai-stretch">
            <Panel
                v-if="selectedFile !== null"
                class="p-mr-2 p-as-stretch file-card"
            >
                <template #header>
                    {{ selectedFile.file.name }}
                </template>

                <OrderList
                    v-model="selectedFilters"
                    listStyle="height:auto"
                    dataKey="file"
                >
                    <template #header> Selected filters </template>
                    <template #item="slotProps">
                        <div class="p-item" @click="selectItem(item)">
                            <div>
                                <span class="p-caritem-vin">{{
                                        slotProps.item.file.name
                                    }}</span>
                                <Chip :label="slotProps.item.status" />
                            </div>
                        </div>
                    </template>
                </OrderList>
            </Panel>

            <Card class="p-mr-2 p-as-stretch filters-card">
                <template #header>
                    <Toolbar>
                        <template #left>
                            <h3>Available filters</h3>
                        </template>
                        <template #right>
                            <Button
                                icon="pi pi-plus"
                                class="p-button-success"
                            />
                        </template>
                    </Toolbar>
                </template>

                <template #content> CONTENT </template>
            </Card>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                uiBlocked: false,
                filesSidebarVisible: false,
                selectedFile: null,
                selectedFilters: [],
            };
        },

        props: {
            files: {
                required: true,
                type: Array,
            },
        },

        methods: {
            selectItem(item) {
                console.log('SELECTING ITEM: ', item);
                this.selectedFile = item;
                this.filesSidebarVisible = false;
            }
        },

        created() {
            this.files = [];

            setTimeout(
                () => {
                    this.filesSidebarVisible = true;
                },
                500,
            );
        },
    };
</script>

<style>
.file-card,
.filters-card {
    flex: 0 1 48%;
}
</style>
