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

import { Palette } from "std-widgets.slint";
import { TextStyle, IconStyle, LayoutStyle, BorderStyle } from "../foundation.slint";

global CurrentColorScheme {
    in_out property <ColorScheme> color_scheme: Palette.color_scheme;
}

export global CatPalette {
    out property <brush> transparent: #000000.with_alpha(0);
    out property <brush> background: root.dark_color_scheme ? #24273a: #eff1f5;
    out property <brush> foreground: root.dark_color_scheme ? #cad3f5: #4c4f69;
    out property <brush> placeholder_foreground: root.dark_color_scheme ? #a6adc8: #a5adce;
    out property <brush> alternate_background: root.dark_color_scheme ? #494d64: root.background;
    out property <brush> control_background: root.dark_color_scheme ? #363a4f: #ccd0da;
    out property <brush> control_foreground: root.foreground;
    in_out property <brush> accent_background: root.dark_color_scheme ? #8bd5ca: #179299;
    out property <brush> accent_foreground: root.background;
    out property <brush> destructive_background: root.dark_color_scheme ? #ed8796 : #d20f39;
    out property <brush> destructive_foreground: root.accent_foreground;
    out property <brush> border: root.dark_color_scheme ? #5b6078: #acb0be;
    out property <brush> focus_border: root.accent_background;
    out property <brush> state_pressed: root.dark_color_scheme ? #000000.with_alpha(0.4) : #000000.with_alpha(0.3);
    out property <brush> state_hovered: root.dark_color_scheme ? #ffffff.with_alpha(0.2) : #000000.with_alpha(0.2);
    out property <brush> selection_background: root.dark_color_scheme ? #9ca0b0.with_alpha(0.3) : #7c7f93.with_alpha(0.3);
    out property <brush> secondary_accent_background:
        root.dark_color_scheme ? root.accent_background.darker(0.5) : root.accent_background.darker(0.2);
    out property <brush> shadow: #00000026;
    out property <bool> dark_color_scheme: CurrentColorScheme.color_scheme == ColorScheme.dark;
}

export global PurePlatte {
    out property <brush> transparent: #000000.with_alpha(0);
    out property <brush> background: root.dark_color_scheme ? #2d2d2d: #dfdfdf;
    out property <brush> foreground: root.dark_color_scheme ? #dfdfdf: #2d2d2d;
    out property <brush> placeholder_foreground: root.dark_color_scheme ? #7e7e7e: #505050;
    out property <brush> alternate_background: root.dark_color_scheme ? #414141: root.background;
    out property <brush> control_background: root.dark_color_scheme ? #505050: #bdbdbd;
    out property <brush> control_foreground: root.dark_color_scheme ? #dfdfdf : #212121;
    in_out property <brush> accent_background: root.dark_color_scheme ? #01fec5: #1d9bf2;
    out property <brush> accent_foreground: root.dark_color_scheme ? #212121: #dfdfdf;
    out property <brush> destructive_background: root.dark_color_scheme ? #F27573 : #EF5350;
    out property <brush> destructive_foreground: root.accent_foreground;
    out property <brush> border: root.dark_color_scheme ? #7e7e7e: #505050;
    out property <brush> focus_border: root.accent_background;
    out property <brush> state_pressed: root.dark_color_scheme ? #000000.with_alpha(0.4) : #000000.with_alpha(0.3);
    out property <brush> state_hovered: root.dark_color_scheme ? #ffffff.with_alpha(0.2) : #000000.with_alpha(0.2);
    out property <brush> selection_background: root.dark_color_scheme ? #01fec325: #1d9bf225;
    out property <brush> secondary_accent_background:
        root.dark_color_scheme ? root.accent_background.darker(0.5) : root.accent_background.darker(0.2);
    out property <brush> shadow: #00000026;
    out property <bool> dark_color_scheme: CurrentColorScheme.color_scheme == ColorScheme.dark;
}

export enum ColorTheme {
    Cat,
    Pure
}

export global MagicPalette {
    in_out property <ColorTheme> color_theme: ColorTheme.Cat;
    in_out property <ColorScheme> color_scheme <=> CurrentColorScheme.color_scheme;
    out property <bool> dark_color_scheme: root.color_scheme == ColorScheme.dark;
    out property <brush> transparent: root.color_theme == ColorTheme.Cat ? CatPalette.transparent : PurePlatte.transparent;
    out property <brush> background: root.color_theme == ColorTheme.Cat ? CatPalette.background : PurePlatte.background;
    out property <brush> foreground: root.color_theme == ColorTheme.Cat ? CatPalette.foreground : PurePlatte.foreground;
    out property <brush> placeholder_foreground: root.color_theme == ColorTheme.Cat ? CatPalette.placeholder_foreground : PurePlatte.placeholder_foreground;
    out property <brush> alternate_background: root.color_theme == ColorTheme.Cat ? CatPalette.alternate_background : PurePlatte.alternate_background;
    out property <brush> control_background: root.color_theme == ColorTheme.Cat ? CatPalette.control_background : PurePlatte.control_background;
    out property <brush> control_foreground: root.color_theme == ColorTheme.Cat ? CatPalette.control_foreground : PurePlatte.control_foreground;
    in_out property <brush> accent_background: root.color_theme == ColorTheme.Cat ? CatPalette.accent_background : PurePlatte.accent_background;
    out property <brush> accent_foreground: root.color_theme == ColorTheme.Cat ? CatPalette.accent_foreground : PurePlatte.accent_foreground;
    out property <brush> alternate_accent_background: root.dark_color_scheme ? root.accent_background.darker(0.3) : root.accent_background.brighter(0.3);
    out property <brush> destructive_background: root.color_theme == ColorTheme.Cat ? CatPalette.destructive_background : PurePlatte.destructive_background;
    out property <brush> destructive_foreground: root.color_theme == ColorTheme.Cat ? CatPalette.destructive_foreground : PurePlatte.destructive_foreground;
    out property <brush> border: root.color_theme == ColorTheme.Cat ? CatPalette.border : PurePlatte.border;
    out property <brush> focus_border: root.color_theme == ColorTheme.Cat ? CatPalette.focus_border : PurePlatte.focus_border;
    out property <brush> state_pressed: root.color_theme == ColorTheme.Cat ? CatPalette.state_pressed : PurePlatte.state_pressed;
    out property <brush> state_hovered: root.color_theme == ColorTheme.Cat ? CatPalette.state_hovered : PurePlatte.state_hovered;
    out property <brush> selection_background: root.color_theme == ColorTheme.Cat ? CatPalette.selection_background : PurePlatte.selection_background;
    out property <brush> secondary_accent_background: root.color_theme == ColorTheme.Cat ? CatPalette.secondary_accent_background : PurePlatte.secondary_accent_background;
    out property <brush> shadow: root.color_theme == ColorTheme.Cat ? CatPalette.shadow : PurePlatte.shadow;
}

export global MagicFontSettings {
    out property <int> light_font_weight: 300;
    out property <int> regular_font_weight: 500;
    out property <int> semi_bold_font_weight: 600;
    out property <TextStyle> light: {
        font_size: 14 * 0.0769rem,
        font_weight: root.light_font_weight,
        foreground: MagicPalette.placeholder_foreground
    };
    out property <TextStyle> supporting: {
        font_size: 16 * 0.0769rem,
        font_weight: root.light_font_weight,
        foreground: MagicPalette.foreground.with_alpha(0.9)
    };
    out property <TextStyle> body: {
        font_size: 16 * 0.0769rem,
        font_weight: root.regular_font_weight,
        foreground: MagicPalette.foreground
    };
    out property <TextStyle> body_strong: {
        font_size: 16 * 0.0769rem,
        font_weight: root.semi_bold_font_weight,
        foreground: MagicPalette.foreground
    };
    out property <TextStyle> header_1: {
        font_size: 72 * 0.0769rem,
        font_weight: root.semi_bold_font_weight,
        foreground: MagicPalette.foreground
    };
    out property <TextStyle> header_2: {
        font_size: 32 * 0.0769rem,
        font_weight: root.semi_bold_font_weight,
        foreground: MagicPalette.foreground
    };
    out property <TextStyle> header_3: {
        font_size: 18 * 0.0769rem,
        font_weight: root.semi_bold_font_weight,
        foreground: MagicPalette.foreground
    };
}

export global MagicIconSettings {
    out property <IconStyle> body: {
          icon_size: 16 * 0.0769rem,
          foreground: MagicPalette.foreground
    };
}

export global MagicAnimationSettings {
    out property <duration> fast_resize_duration: 100ms;
    out property <duration> color_duration: 125ms;
    out property <duration> resize_duration: 250ms;
    out property <duration> move_in_duration: 250ms;
    out property <duration> move_out_duration: 200ms;
    out property <easing> move_in_easing: cubic-bezier(0, 0, 0, 1);
    out property <easing> move_out_easing: cubic-bezier(0.3, 0, 1, 1);
}

export global MagicSizeSettings {
    in_out property <bool> mobile_size;
    out property <length> bar_height: 6px;
    out property <length> box_height: 20px;
    out property <length> item_height: root.mobile_size ? 40px : 32px;
    out property <length> control_height: root.mobile_size ? 40px : 32px;
    out property <length> app_bar_height: root.mobile_size ? 48px : 40px;
    out property <length> min_text_field_width: 160px;
    out property <length> min_text_area_height: 64px;
}

export global MagicLayoutSettings {
    out property <length> layout_spacing: 8px;
    out property <length> layout_padding: 8px;
    out property <length> alternate_layout_padding: 4px;
    out property <length> control_spacing: 4px;
    out property <length> control_padding: 16px;
    out property <length> text_input_horizontal_padding: 8px;
    out property <length> text_input_vertical_padding: 4px;

    out property <LayoutStyle> control_style: {
        padding_left: root.control_padding,
        padding_right: root.control_padding,
        spacing: root.control_spacing,
        alignment: LayoutAlignment.center
    };

    out property <LayoutStyle> bar_style: {
        padding_top: root.alternate_layout_padding,
        padding_bottom: root.alternate_layout_padding,
        padding_left: root.layout_padding,
        padding_right: root.layout_padding,
        spacing: root.layout_spacing,
        alignment: LayoutAlignment.stretch
    };

    out property <LayoutStyle> text_input_style: {
        padding_left: root.text_input_horizontal_padding,
        padding_right: root.text_input_horizontal_padding,
        padding_top: root.text_input_vertical_padding,
        padding_bottom: root.text_input_vertical_padding,
        spacing: root.control_spacing,
    };
}

export global MagicBorderSettings {
    out property <length> bar_border_radius: 4px;
    out property <length> box_border_radius: 4px;
    out property <length> control_border_radius: MagicSizeSettings.mobile_size ? 20px : 16px;
    out property <length> control_border_width: 1px;

    out property <BorderStyle> alternate_border_style: {
        background: MagicPalette.alternate_background,
    };

    out property <BorderStyle> popup_border_style: {
        border_width: root.control_border_width,
        border_radius: root.bar_border_radius,
        border_brush: MagicPalette.border,
        background: MagicPalette.background
    };
}