<template>
    <div id="searchers-show">
        <Panel :header="searcher.name">
            <template #icons>
                <a
                    class="p-panel-header-icon p-link"
                    v-if="editable"
                    :href="`/searchers/${searcher.id}/edit`"
                >
                    <span class="pi pi-cog"></span>
                </a>
            </template>

            <div class="p-d-flex p-jc-start">
                <h5>{{ searcher.description }}</h5>

                <Timeline :value="searcher.rows">
                    <template #opposite="slotProps">
                        <small class="p-text-secondary">
                            {{ slotProps.index + 1 }}
                        </small>
                    </template>
                    <template #content="slotProps">
                        <ScrollPanel
                            style="max-width: 90vw; height: 125px"
                            class="searcher-list"
                        >
                            <div
                                v-for="(
                                    searcherItem, columnIndex
                                ) in slotProps.item"
                                :key="`column-${columnIndex}`"
                            >
                                <div class="box is-plain p-shadow-5">
                                    <template
                                        v-if="
                                            searcherItem.hasOwnProperty('name')
                                        "
                                    >
                                        <searcher-show
                                            :editable="false"
                                            :searcher="searcherItem"
                                        ></searcher-show>
                                    </template>

                                    <template v-else>
                                        <b>{{ searcherItem.expression }}</b>
                                    </template>
                                </div>
                            </div>
                        </ScrollPanel>
                        <Divider />
                    </template>
                </Timeline>
            </div>
        </Panel>
    </div>
</template>

<script lang="ts">
    import { Component, Vue, Prop } from "vue-property-decorator";

    @Component({
        name: "SearcherShow",
    })
    export default class Create extends Vue {
        @Prop({ default: {} })
        public readonly searcher!: Object;

        @Prop({ default: true })
        public readonly editable!: boolean;
    }
</script>

<style lang="scss" scoped>
    ::v-deep .p-timeline-event-opposite {
        flex: 0 !important;
    }

    ::v-deep .p-timeline-event-content {
        margin-bottom: 25px;
    }

    ::v-deep .searcher-list {
        .p-scrollpanel-content {
            display: flex;
            flex-direction: row;
            padding-top: 25px
        }

        .p-scrollpanel-bar {
            background-color: #1976d2;
            opacity: 1;
            transition: background-color 0.3s;
        }
    }
</style>
