// SPDX-FileCopyrightText: 2024 vivi developers <vivi-ui@tuta.io>
// SPDX-License-Identifier: GPL-3.0-only

import { Border, BorderStyle, TextStyle, HorizontalLayoutBase, LayoutStyle } from "../../foundation.slint";
import { MagicPalette, MagicLayoutSettings, MagicBorderSettings, MagicFontSettings, MagicAnimationSettings } from "../styling.slint";
import { Icons } from "../icons.slint";
import { TextButton } from "../text_button.slint";
import { IconButton } from "../icon_button.slint";
import { ButtonAction } from "../magic_button_base.slint";
import { MagicText } from "../magic_text.slint";

export struct SnackBarStyle {
    border_style: BorderStyle,
    layout_style: LayoutStyle,
    text_style: TextStyle,
}

export component SnackBar {
    in property <string> message;
    in property <string> action_text;
    in property <bool> closeable;
    in property <SnackBarStyle> style;
    out property <BorderStyle> border_style: root.style.border_style;
    out property <LayoutStyle> layout_style: root.style.layout_style;
    out property <TextStyle> text_style: root.style.text_style;

    property <bool> open;
    property <length> content_height;

    callback action();

    height: !root.open ? 0 : root.content_height;
    style: {
        layout_style: {
            padding_top: MagicLayoutSettings.alternate_layout_padding,
            padding_bottom: MagicLayoutSettings.alternate_layout_padding,
            padding_left: MagicLayoutSettings.layout_padding,
            padding_right: MagicLayoutSettings.layout_padding,
            spacing: MagicLayoutSettings.layout_spacing
        },
        border_style: {
            background: MagicPalette.background,
            border_width: MagicBorderSettings.control_border_width,
            border_brush: MagicPalette.border
        },
        text_style: MagicFontSettings.body
    };

    TouchArea {
        clicked => {
            root.close();
        }
    }

    if root.open : Rectangle {
        width: 100%;
        height: root.height;
        clip: true;

        background_layer := Border {
            y: root.height;
            width: 100%;
            height: self.min_height;
            style: root.border_style;
            drop_shadow_color: MagicPalette.shadow;
            drop_shadow_blur: 16px;
            drop_shadow_offset_y: -1px;

            HorizontalLayoutBase {
                style: root.layout_style;

                MagicText {
                    horizontal_stretch: 1;
                    text: root.message;
                    style: root.text_style;
                    vertical_alignment: center;
                }

                if root.action_text != "" : TextButton {
                    horizontal_stretch: 0;
                    action: ButtonAction.primary;
                    text: root.action_text;

                    clicked => {
                        root.action();
                        root.close();
                    }
                }

                if root.closeable : IconButton {
                    horizontal_stretch: 0;
                    icon: Icons.clear;

                    clicked => {
                        root.close();
                    }
                }
            }

            init => {
                root.content_height = self.min_height;
                self.y = 0;
            }

        }
    }

    public function show() {
        root.open = true;
    }

    public function close() {
        root.open = false;
    }

    animate height {
        duration: MagicAnimationSettings.move_in_duration;
        easing: MagicAnimationSettings.move_in_easing;
    }
}