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

import { Border, CheckBoxBase, FocusTouchArea, HorizontalLayoutBase } from "../foundation.slint";
import { StateLayer } from "./state_layer.slint";
import { MagicIcon } from "./magic_icon.slint";
import { MagicText } from "./magic_text.slint";
import { Icons } from "icons.slint";
import {
    MagicPalette,
    MagicFontSettings,
    MagicIconSettings,
    MagicAnimationSettings,
    MagicSizeSettings,
    MagicIconSettings,
    MagicBorderSettings,
    MagicLayoutSettings
} from "./styling.slint";

export component CheckBox inherits CheckBoxBase {
    in property <string> text;

    min_width: content_layer.min_width;
    forward_focus: touch_area;
    style: {
        box_style: {
            background: !root.checked ? MagicPalette.background : MagicPalette.accent_background,
            border_radius: MagicBorderSettings.box_border_radius,
            border_brush: MagicPalette.border,
            border_width: MagicBorderSettings.control_border_width,
        },
        box_icon_style: {
            icon_size: MagicIconSettings.body.icon_size,
            foreground: MagicPalette.accent_foreground,
        },
        text_style: MagicFontSettings.body,
        layout_style: {
            spacing: MagicLayoutSettings.control_spacing,
        }
    };

    accessible_label: root.text;
    accessible_action_default => {
        touch_area.clicked();
    }

    touch_area := FocusTouchArea {
        width: 100%;
        height: 100%;
        enabled: root.enabled;
        mouse_cursor: root.enabled ? pointer : not-allowed;

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

    content_layer := HorizontalLayoutBase {
        style: root.style.layout_style;

        box := Border {
            width: self.height;
            min_height: MagicSizeSettings.box_height;
            horizontal_stretch: 0;
            style: root.style.box_style;

            state_layer := StateLayer {
                width: 100%;
                height: 100%;
                border_radius: box.border-radius;
                pressed: touch_area.pressed || touch_area.enter_pressed;
                has_hover: touch_area.has_hover;
                has_focus: touch_area.has_focus;
            }

            check_icon := MagicIcon {
                icon: Icons.check;
                style: root.style.box_icon_style;
                opacity: 0;

                animate opacity { duration: MagicAnimationSettings.color_duration; }
            }

            animate background { duration: MagicAnimationSettings.color_duration; }

            states [
                checked when root.checked : {
                    check_icon.opacity: 1;
                }
            ]
        }

        if root.text != "" : MagicText {
            text: root.text;
            style: root.style.text_style;
            vertical_alignment: center;
        }
    }

    states [
        disabled when !root.enabled : {
            root.opacity: 0.5;
        }
    ]
}