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

export enum State {
    Project,
    ConvertImage,
}

component ProjectWidget inherits Rectangle {
    Text {
        text: "!!Planschbecken!!";
    }
}

component ConvertImageWidget inherits Rectangle {
    in-out property <string> image_path;
    in-out property <image>  image_data;
    in-out property <image>  image_palette_data;
    in-out property <string> image_name;
    in-out property <bool>   enable_button: false;

    callback browse_clicked();
    callback add_clicked();

    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;
                    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;
                        }
                    }
                    Rectangle {
                        // Fake padding because the padding setting for the HorizontalLayout would not work
                        width:  4px;
                        height: 1px;
                    }
                    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_palette_data;
                            image-fit:       contain;
                            image-rendering: pixelated;
                        }
                    }
                }
                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_button;
                        clicked => {root.add_clicked();}
                    }
                }
            }
        }
    }
}

export component FileTab inherits Rectangle {
    in-out property <string> conv_image_path;
    in-out property <image>  conv_image_data;
    in-out property <string> conv_image_name;
    in-out property <bool>   conv_image_enable;
    in-out property <State>  state;
    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 {
            }
            if root.state == State.ConvertImage : ConvertImageWidget {
                image_path    <=> root.conv_image_path;
                image_data    <=> root.conv_image_data;
                image_name    <=> root.conv_image_name;
                enable_button <=> root.conv_image_enable;

                browse_clicked => {
                    root.conv_image_browse_clicked();
                }

                add_clicked => {
                    root.conv_image_add_clicked();
                }
            }
        }
    }
}