import { Button, TabWidget, LineEdit, GroupBox, ComboBox, CheckBox } from "std-widgets.slint";

export enum State {
    Project,
    ConvertImage,
}

component ProjectWidget inherits Rectangle {
    in-out property <string> open_project_path;
    in-out property <string> save_project_path;
    in-out property <bool>   append_project_elements;
    in-out property <bool>   use_rel_paths;

    callback load_project_clicked();
    callback save_project_clicked();
    callback browse_open_project_clicked();
    callback browse_save_project_clicked();

    background: #D0D0D0;

    VerticalLayout {
        alignment: start;
        padding: 4px;
        GroupBox {
            title: "Open Project";
            VerticalLayout {
                alignment: start;
                Text {
                    text: "Select a project to open.";
                }
                HorizontalLayout {
                    alignment: start;
                    LineEdit {
                        width: 300pt;
                        text:  root.open_project_path;   
                    }
                    Button {
                        text: "Browse";
                        clicked => {
                            root.browse_open_project_clicked();
                        }
                    }
                }
                HorizontalLayout {
                    alignment: start;
                    CheckBox {
                        text: "Append elements from project";
                        toggled() => {
                            root.append_project_elements = self.checked;
                        }
                    }
                }
                HorizontalLayout {
                    alignment: start;
                    Button {
                        text: "Load";
                        clicked => {
                            root.load_project_clicked();
                        }
                    }
                }
            }
        }
        GroupBox {
            title: "Save Project";
            VerticalLayout {
                alignment: start;
                padding: 4px;
                Text {
                    text: "Save the current project";
                }
                HorizontalLayout {
                    alignment: start;
                    LineEdit {
                        width: 300pt;
                        text:  root.save_project_path;
                    }
                    Button {
                        text: "Browse";
                        clicked => {
                            root.browse_save_project_clicked();
                        }
                    }
                }
                CheckBox {
                    text:    "Use relative path for files";
                    checked: root.use_rel_paths;
                }
                HorizontalLayout {
                    alignment: start;
                    Button {
                        text: "Save";
                        clicked => {
                            root.save_project_clicked();
                        }
                    }    
                }
            }
        }
    }
}

component ConvertImageWidget inherits Rectangle {
    in-out property <[string]> encoding_options: [];
    in-out property <string>   image_path;
    in-out property <string>   image_name;
    in-out property <image>    image_data;
    in-out property <int>      image-width;
    in-out property <int>      image-height;
    in-out property <image>    palette_data;
    in-out property <int>      palette_width:     0;
    in-out property <int>      palette_height:    0;
    in-out property <string>   selected_encoding;
    in-out property <bool>     enable_view:       false;
    in-out property <bool>     palette_visible:   false;

    callback browse_clicked();
    callback add_clicked();
    callback update_palette_size(int, int);

    background: #D0D0D0;

    VerticalLayout {
        alignment: start;
        GroupBox {
            title: "Add image file";
            VerticalLayout {
                alignment: start;
                padding:   4px;
                Text {
                    text: "Select image file to convert to be used with TIM Tool";
                }
                HorizontalLayout {
                    alignment: start;
                    padding:   4px;  
                    LineEdit {
                        width: 300pt;
                        text:  image_path;
                    }
                    Button {
                        text: "Browse";
                        clicked => {browse_clicked();}
                    }
                }
            }
        }
    
        GroupBox {
            title: "Loaded image and palette";
            VerticalLayout {
                alignment: start;
                padding:   4px;
                HorizontalLayout {
                    alignment: center;
                    VerticalLayout {
                        Rectangle {
                            width:  256px + 2*4px; // < Because of border
                            height: 256px + 2*4px; // < Because of border
                            background: #404040;
                            border-color: #808080;
                            border-width: 4px;
                            Image {
                                width:           256px;
                                height:          256px;
                                source:          root.image_data;
                                image-fit:       contain;
                                image-rendering: pixelated;
                            }
                        }
                        VerticalLayout {
                            alignment: center;
                            Text {
                                text: "Width: " + root.image-width;
                            }
                        }
                        VerticalLayout {
                            alignment: center;
                            Text {
                                text: "Height: " + root.image-height;
                            }
                        }
                        VerticalLayout {
                            alignment: center;
                            ComboBox {
                                model:   root.encoding_options;
                                enabled: root.enable_view;

                                selected(current-value) => {
                                    root.selected_encoding = current-value;
                                }
                            }
                        }
                    }
                    Rectangle {
                        // Fake padding because the padding setting for the HorizontalLayout would not work
                        width:  4px;
                        height: 1px;
                    }
                    VerticalLayout {
                        Rectangle {
                            width:  256px + 2*4px; // < Because of border
                            height: 256px + 2*4px; // < Because of border
                            background: #404040;
                            border-color: #808080;
                            border-width: 4px;
                            palette_image := Image {
                                width:           256px;
                                height:          256px;
                                source:          root.palette_data;
                                visible:         root.palette_visible;
                                image-fit:       contain;
                                image-rendering: pixelated;
                            }
                        }
                        HorizontalLayout {
                            alignment: start;
                            VerticalLayout {
                                VerticalLayout {
                                    alignment: center;
                                    Text {
                                        text: "Width: ";
                                    }
                                }
                                VerticalLayout {
                                    alignment: center;
                                    Text {
                                        text: "Height: ";
                                    }
                                }
                            }
                            VerticalLayout {
                                palette_width_edit := LineEdit {
                                    width:      40pt;
                                    input-type: number;
                                    enabled:    root.palette_visible;
                                    text:       root.palette_width;

                                    accepted(text) => {
                                        update_palette_size(palette_width_edit.text.to-float(), palette_height_edit.text.to-float());
                                    }
                                }
                                palette_height_edit := LineEdit {
                                    width:      40pt;
                                    input-type: number;
                                    enabled:    root.palette_visible;
                                    text:       root.palette_height;

                                    accepted(text) => {
                                        update_palette_size(palette_width_edit.text.to-float(), palette_height_edit.text.to-float());
                                    }
                                }
                            }
                        }
                    }
                }
                HorizontalLayout {
                    alignment: start;
                    padding:   4px;
                    VerticalLayout {
                        alignment: center;
                        Text {
                            text: "Name: ";
                        }
                    }
                    LineEdit {
                        text: root.image_name;
                    }
                }
                HorizontalLayout {
                    alignment: start;
                    padding:   4px;
                    Button {
                        text:    "Add Image";
                        enabled: root.enable_view;
                        clicked => {root.add_clicked();}
                    }
                }
            }
        }
    }

    public function set_palette_image(image: image) {
        palette_image.source  = image;
        palette_image.visible = true;
    }

    public function clear_palette_image() {
        palette_image.visible = false;
    }
}

export component FileTab inherits Rectangle {
    in-out property <State>  state;
    // For project widget
    in-out property <string> project_widget-open_project_path;
    in-out property <string> project_widget-save_project_path;
    in-out property <bool>   project_widget-append_project_elements;
    in-out property <bool>   project_widget-use_rel_paths;
    callback                 project_widget-load_project_clicked();
    callback                 project_widget-save_project_clicked();
    callback                 project_widget-browse_open_project_clicked();
    callback                 project_widget-browse_save_project_clicked();

    // For image conversion widget
    in-out property <[string]> conv-encoding_options;
    in-out property <string>   conv-image_path;
    in-out property <string>   conv-image_name;
    in-out property <image>    conv-image_data;
    in-out property <int>      conv-image_width;
    in-out property <int>      conv-image_height;
    in-out property <image>    conv-palette_data;
    in-out property <int>      conv-palette_width;
    in-out property <int>      conv-palette_height;
    in-out property <string>   conv-selected_encoding;
    in-out property <bool>     conv-palette_enable;
    in-out property <bool>     conv-enable_view;    
    callback                   conv-image_update_palette_size(int, int);
    callback                   conv-image_browse_clicked;
    callback                   conv-image_add_clicked;

    x: 0px;
    y: 0px;

    HorizontalLayout {
        padding: 4px;
        VerticalLayout {
            padding: 4px;
            width: 20%;
            alignment: start;

            Button {
                text: "Projects";
                clicked => {
                    root.state = State.Project;
                }
            }
            Button {
                text: "Add Image";
                clicked => {
                    root.state = State.ConvertImage;
                }
            }
        }

        VerticalLayout {
            padding: 4px;
            alignment: start;
            if root.state == State.Project : ProjectWidget {
                open_project_path       <=> root.project_widget-open_project_path;
                save_project_path       <=> root.project_widget-save_project_path;
                append_project_elements <=> root.project_widget-append_project_elements;
                use_rel_paths           <=> root.project_widget-use_rel_paths;

                load_project_clicked() => {
                    root.project_widget-load_project_clicked();
                }

                save_project_clicked() => {
                    root.project_widget-save_project_clicked();
                }

                browse_open_project_clicked() => {
                    root.project_widget-browse_open_project_clicked();
                }

                browse_save_project_clicked() => {
                    root.project_widget-browse_save_project_clicked();
                }
            }

            if root.state == State.ConvertImage : ConvertImageWidget {
                encoding_options  <=> root.conv-encoding_options;
                image_path        <=> root.conv-image_path;
                image_data        <=> root.conv-image_data;
                image-width       <=> root.conv-image_width;
                image-height      <=> root.conv-image_height;
                palette_data      <=> root.conv-palette_data;
                palette_width     <=> root.conv-palette_width;
                palette_height    <=> root.conv-palette_height;
                palette_visible   <=> root.conv-palette_enable;
                selected_encoding <=> root.conv-selected_encoding;
                image_name        <=> root.conv-image_name;
                enable_view       <=> root.conv-enable_view;
                
                update_palette_size(width, height) => {
                    root.conv-image_update_palette_size(width, height);
                }

                browse_clicked => {
                    root.conv-image_browse_clicked();
                }

                add_clicked => {
                    root.conv-image_add_clicked();
                }
            }
        }
    }
}