import { ListView, Button, LineEdit, TabWidget, GroupBox, VerticalBox, HorizontalBox, ScrollView, ComboBox } from "std-widgets.slint";

import { SortView, Filters, SortItem, ListItem } from "sort.slint";
import { EventsView } from "events.slint";
import { SieveView, SieveComboValues } from "sieve.slint";
import { SettingsView } from "settings.slint";
import { HelpView } from "help.slint";

export { SieveComboValues, Filters, SortItem, ListItem }

export component ImageSieve inherits Window {
    min-width: 1600px;
    min-height: 800px;
    title: "ImageSieve";
    icon: @image-url("ImageSieve.png");

    in property <string> window-title <=> root.title;
    in property <bool> loading: true;    
    in property <string> loading-progress <=> loading-progress.text;
    callback cancel-loading;
    // Callback required to signal that the synchronization process has finished
    callback synchronization-finished;
    // Callback required to signal that the item list shall be updated
    callback similarities-calculated(bool);

    // Map properties of SortView
    in property list-model <=> sort-view.list-model;
    in property current-list-item <=> sort-view.current-list-item;
    in property similar-images-model <=> sort-view.similar-images-model;
    in-out property current-image <=> sort-view.current-image;
    in property source-directory <=> sort-view.source-directory;
    in property calculating-similarities <=> sort-view.calculating-similarities;
    out property filters <=> sort-view.filters;
    callback item-selected <=> sort-view.item-selected;
    callback browse-source <=> sort-view.browse-source;
    callback set-take-over <=> sort-view.set-take-over;
    callback open <=> sort-view.open;
    callback filter <=> sort-view.filter;

    // Map properties of EventsView
    in property events-model <=> events-view.events-model;
    callback add-event <=> events-view.add-event;
    callback update-event <=> events-view.update-event;
    callback remove-event <=> events-view.remove-event;

    // Map properties of SieveView
    in property sieve-result-model <=> sieve-view.sieve-result-model;
    in property target-directory <=> sieve-view.target-directory;
    in property sieve-method <=> sieve-view.sieve-method;
    in property sieve-directory-names <=> sieve-view.sieve-directory-names;
    in property sieve-running <=> sieve-view.sieve-running;
    callback sieve <=> sieve-view.sieve;
    callback browse-target <=> sieve-view.browse-target;

    // Map properties of SettingsView
    in property use-timestamps <=> settings-view.use-timestamps;
    in property timestamp-difference <=> settings-view.timestamp-difference;
    in property use-similarity <=> settings-view.use-similarity;
    in property similarity-sensitivity <=> settings-view.similarity-sensitivity;
    in property dark-mode <=> settings-view.dark-mode;
    in property system-dark <=> settings-view.system-dark;
    callback recheck-similarities <=> settings-view.recheck-similarities;
    callback open-url <=> settings-view.open-url;

    // Inter-tab callbacks
    callback fill-event-cb <=> sort-view.fill-event;
    callback fill-event(string);
    fill-event(image-date) => { 
        tabs.current-index = 1;
        events-view.new-name = "Event name";
        events-view.new-start-date = image-date;
        events-view.new-end-date = image-date;
        events-view.highlight-new = true;
    }

    forward-focus: key-handler;
    key-handler:= FocusScope {  
        key-pressed(event) => {
            if (tabs.current-index == 0) {
                if (event.text == Key.LeftArrow) {
                    if (current-list-item > 0) {
                        sort-view.prev-clicked();
                    }
                }
                if (event.text == Key.RightArrow) {
                    if (list-model.length > 0 && current-list-item < list-model.length - 1) {
                        sort-view.next-clicked();
                    }
                }
                if (event.text == Key.UpArrow) {
                    if (sort-view.current-similar-image < similar-images-model.length - 1) {
                        sort-view.current-similar-image = sort-view.current-similar-image + 1;
                        sort-view.current-image.image = similar-images-model[sort-view.current-similar-image].image;
                        sort-view.current-image.take-over = similar-images-model[sort-view.current-similar-image].take-over;
                        sort-view.current-image.text = similar-images-model[sort-view.current-similar-image].text;
                        sort-view.current-image.local-index = similar-images-model[sort-view.current-similar-image].local-index;                        
                    }
                }
                if (event.text == Key.DownArrow) {
                    if (sort-view.current-similar-image > 0) {
                        sort-view.current-similar-image = sort-view.current-similar-image - 1;
                        sort-view.current-image.image = similar-images-model[sort-view.current-similar-image].image;
                        sort-view.current-image.take-over = similar-images-model[sort-view.current-similar-image].take-over;
                        sort-view.current-image.text = similar-images-model[sort-view.current-similar-image].text;
                        sort-view.current-image.local-index = similar-images-model[sort-view.current-similar-image].local-index;                        
                    }
                }
                if (event.text == Key.Return) {
                    if (list-model.length > 0) {
                        sort-view.open(current-image.local-index);
                    }
                }
                if (event.text == " ") {
                    if (list-model.length > 0) {
                        sort-view.selected-clicked()
                    }
                }
                accept
            }
            else {
                reject
            }
        }
                
        tabs := TabWidget { 
            visible: !loading;
            width: 100%;
            height: 100%;
            Tab {
                title: "📷 📹  Images & videos";
                
                sort-view := SortView {
                }
            }

            Tab {
                title: "📅  Events";

                events-view := EventsView {
                }
            }

            Tab {
                title: "💾  Sieve";
                
                sieve-view := SieveView {
                }
            }

            Tab {
                title: "⚙  Settings";
                
                settings-view := SettingsView {                
                }
            }

            Tab {
                title: "❓  Help";
                help-view := HelpView {
                }
            }
        }

    }
    VerticalLayout { 
        alignment: center;
        spacing: 10px;

        HorizontalLayout { 
            alignment: center;
            Text {
                text: "⌛ Please wait, searching for images & videos...";
                visible: loading;
                font-size: 20px;
            }
        }
        HorizontalLayout { 
            alignment: center;
            loading-progress := Text {
                visible: loading;
            }
        }
        HorizontalLayout { 
            alignment: center;
            Button {
                text: "❌ Cancel";
                visible: loading;
                width: 200px;
                clicked => {
                    cancel-loading();
                }
            }
        }
    }
}