import { IconButton } from "icon_button.slint";
import { Theme } from "theme.slint";
import { GradientButton } from "button.slint";

export component Footer inherits Rectangle {
    callback settings-clicked();
    callback open-clicked();

    property <image> cog_icon: @image-url("../icons/cog.svg");
    property <image> sun_icon: @image-url("../icons/sun.svg");
    property <image> moon_icon: @image-url("../icons/moon.svg");

    width: 448px;

    Rectangle {
        height: 1px;
        width: 100%;
        y: 0px;
        background: Theme.border-main;
    }

    HorizontalLayout {
        alignment: space-between;
        spacing: Theme.spacing-lg;
        padding: Theme.spacing-md;
        padding-left: Theme.spacing-lg;

        HorizontalLayout {
            spacing: 16px;

            VerticalLayout {
                alignment: center;
                IconButton {
                    icon: sun_icon;
                    clicked => {
                        Theme.toggle();
                    }
                }
            }

            VerticalLayout {
                alignment: center;
                IconButton {
                    icon: cog_icon;
                    clicked => {
                        root.settings-clicked();
                    }
                }
            }
        }

        HorizontalLayout {
            alignment: center;
            VerticalLayout {
                alignment: center;
                Text {
                    text: "Escape - закрыть";
                    color: Theme.text-hint;
                }
            }
        }

        GradientButton {
            text: "Открыть";
            clicked => {
                root.open-clicked();
            }
        }
    }
}