<template>

    <div class="p-d-flex p-flex-row p-jc-between p-ai-stretch">
        <!-- <Toast /> -->
        <Card
            class="p-mr-2 p-as-stretch file-card"
        >
            <template #header>
                <Toolbar>
                    <template #left>
                        <h3>File preview</h3>
                    </template>

                    <template #right>
                        <Button
                            label="Run filters"
                            icon="pi pi-play"
                            class="p-button-success p-button-outlined p-button-sm"
                            :disabled="fileContent == ''"
                            @click="runFilters()"/>
                    </template>
                </Toolbar>
            </template>

            <template #content>
                <template v-if="fileContent === ''">
                    <Skeleton /><br />
                    <Skeleton /><br />
                    <Skeleton /><br />
                    <Skeleton /><br />
                    <Skeleton /><br />
                    <Skeleton /><br />
                    <Skeleton /><br />
                </template>
                <template v-else>
                    <vue-markdown :source="fileContent" />
                </template>
            </template>

        </Card>

        <Card class="p-mr-2 p-as-stretch filters-card">
            <template #header>
                <Toolbar>
                    <template #left>
                        <h3>Document searchers</h3>
                    </template>
                    <template #right>
                        <Button
                            icon="pi pi-plus"
                            class="p-button-success p-button-sm p-button-text"
                            @click="toggleSearchersMenu"
                            aria:haspopup="true"
                            aria-controls="overlay_panel" />
                    </template>
                </Toolbar>
            </template>

            <template #content>
                <DataTable
                    :value.sync="selectedSearchers"
                    dataKey="id"
                    class="p-datatable-sm"
                    :expandedRows.sync="expandedRows"
                    @row-reorder="onSelectedSearchersReorder">

                    <Column :rowReorder="true" headerStyle="width: 3rem" />
                    <Column field="name" header="Name" sortable></Column>
                    <Column :expander="true" headerStyle="width: 3rem" />

                    <template #expansion="slotProps">
                        <div class="options-subtable">
                            <!-- TODO: Add real options here -->
                            <!-- <h5>Options for {{slotProps.data.name}}</h5> -->

                            <!-- <ProgressSpinner /> -->

                            <div class="p-fluid">
                                <div class="p-field">
                                    <label :for="`replace_with__${slotProps.data.id}`">
                                        Replace values with:
                                    </label>

                                    <InputText
                                        :id="`replace_with__${slotProps.data.id}`"
                                        type="text"
                                        class="p-inputtext-sm"
                                        v-model="searchersOptions[slotProps.data.id]"/>
                                </div>
                            </div>

                        </div>
                    </template>

                </DataTable>
            </template>
        </Card>

        <OverlayPanel
            ref="searchers-overlay"
            appendTo="body"
            id="overlay_panel"
            style="width: 300px">

            <DataTable
                :value.sync="searchersData"
                :selection.sync="selectedSearchers"
                dataKey="id"
                selectionMode="multiple"
                class="p-datatable-sm"
                :metaKeySelection="false"
                :paginator="true" :rows="10"
                paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
                :rowsPerPageOptions="[10,20,50]">

                <Column selectionMode="multiple" headerStyle="width: 3em"></Column>
                <Column field="name" header="Name" sortable></Column>

            </DataTable>
        </OverlayPanel>
    </div>
</template>

<script lang="ts" src="./ProcessFile.ts"></script>
<style lang="scss" src="./ProcessFile.scss"></style>
