import axios from 'axios';
// import OverlayPanel from 'primevue/overlaypanel/OverlayPanel';
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
import { FileData } from '@interfaces/FileData';

@Component
export default class ProcessFile extends Vue {

    /**
     * Props
     */
    // The data for the file we are processing
    @Prop({ default: { id: -1, file: '', path: '' } })
    public readonly file!: FileData;

    // The list of available searchers
    @Prop({ default: [] })
    public readonly searchers!: { [keys: string]: string; }


    /**
     * Class members
     */
    public $refs!: {
        'searchers-overlay': any
    }

    // The id of the interval used to query the file status
    private intervalId!: any;

    // The content of the file we are processing
    private fileContent: string = '';

    // The list of filters/searchers in a format usable by the datatable
    private searchersData: Array<{ id: string; name: string; }> = [];

    // The list of selected filters/searchers
    private selectedSearchers: Array<{ id: string; name: string; }> = [];

    //The list of expanded rows in the selected filters/searchers table
    private expandedRows: Array<{id: string; name: string; }> = [];

    /**
     *
     */
    created() {
        for(let index in this.searchers) {
            let searcherData = {
                id: index,
                name: this.searchers[index]
            };

            this.searchersData.push(searcherData);
        }


        this.intervalId = setInterval(this.waitForFile, 3000);
    }

    /**
     *
     */
    private async waitForFile() {

        const response = await this.$api.getFileData(this.file.id);

        if (response.text !== null && response.ready === true) {

            if (response.ingest_status === 'fail') {
                this.$toast.add({
                    severity: 'error',
                    summary: 'File error',
                    detail: 'THere was an error processing the file in ingest',
                    life: 3000
                });
            } else {
                this.fileContent = response.documentContent;

                this.$toast.add({
                    severity:'success',
                    summary: 'File loaded',
                    detail: 'The file has been processed by ingest.',
                    life: 3000
                });

                clearInterval(this.intervalId);
            }
        } else {
            console.log('FILE NOT READY YET!');
        }
    }

    private toggleSearchersMenu($event: any) {
        this.$refs['searchers-overlay'].toggle($event);
    }

    private onRowSelect($event: any) {
        console.log('SELECT: ', $event);
        console.log(this.selectedSearchers);
    }

    private onRowUnselect($event: any) {
        console.log('UNSELECT: ', $event);
        console.log(this.selectedSearchers);
    }

    private onSelectedSearchersReorder($event: any)
    {
        this.selectedSearchers = $event.value;
    }

    private onSelectedSearcherExpand($event:any)
    {

    }

    private onSelectedSearcherCollapse($event:any)
    {

    }
}