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
     */
    // 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 processed document content
    private processedFileContent: string = '';

    // Flag to determine whether the text is processing or not
    private processing: boolean = false;

    // Toggles the visibility of the selected searchers sidebar
    private searchersSidebarVisible: boolean = false;

    // Toggles the visibility of the available searchers dialog
    private searchersDialogVisible: boolean = false;

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

    // The list of filters applied to the selected searchers
    private searchersFilters: any = [];

    // 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; }> = [];

    // The list of options applied to the searchers (for the moment, only replace_with)
    private searchersOptions: { [key: string]: 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);
    }

    /**
     * Toggle the sidebar containing the searchers
     */
    private toggleSearchersSidebar() {
        this.searchersSidebarVisible = !this.searchersSidebarVisible;
    }

    /**
     * Toggle the menu containing the list of available searchers
     *
     * @param {string}  newValue    The new value for the dialog visibility
     */
     private toggleSearchersDialog(newValue?: boolean) {

        if (typeof newValue !== 'undefined') {
            this.searchersDialogVisible = newValue;
        } else {
            this.searchersDialogVisible = !this.searchersDialogVisible;
        }
    }

    /**
     * Wait for the file to be processed in ingest
     */
    private async waitForFile() {

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

        if (response.content !== null) {

            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.content;

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

                clearInterval(this.intervalId);
            }
        }
    }


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

    /**
     * Run the searchers
     */
    private async runSearchers() {
        this.processing = true;
        this.processedFileContent = '';

        let searchers: Array<{ key: string; replace_with: string; }> = [];
        this.selectedSearchers.forEach( (searcher) => {
            searchers.push({
                'key': searcher.id,
                'replace_with': this.searchersOptions[searcher.id] || ''
            });
        });

        const response = await this.$api.filterDocument(this.fileContent, searchers);

        console.log(response);

        this.processedFileContent = response.content;
        this.processing = false;
    }

    private async downloadOdt()
    {
        let response = await this.$api.convertFile(this.processedFileContent);
        window.open('http://core.sandd/file/download/' + response.path);
    }
}