// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0

import { ColorSchemeSelector } from "color-scheme.slint";
import { Palette } from "std-widgets.slint";

export struct TextStyle {
    font-size: relative-font-size,
    font-weight: int,
}

export global FluentFontSettings {
    out property <TextStyle> body: { font-size: 14 * 0.0769rem, font-weight: FontWeight.normal };
    out property <TextStyle> body-strong: { font-size: 14 * 0.0769rem, font-weight: FontWeight.semi-bold };
    out property <TextStyle> title: { font-size: 28 * 0.0769rem, font-weight: FontWeight.semi-bold };
}

export global FluentPalette {
    in-out property <ColorScheme> color-scheme: ColorSchemeSelector.color-scheme;
    property <bool> dark-color-scheme: color-scheme == ColorScheme.unknown ? Palette.color-scheme == ColorScheme.dark : color-scheme == ColorScheme.dark;

    pure function accentify(default-color: color) -> color {
        let accent-color = Palette.accent-foreground;
        if (accent-color.alpha > 0) {
            let default-lch = default-color.to-oklch();
            let accent-lch = accent-color.to-oklch();
            return oklch(default-lch.lightness, accent-lch.chroma, accent-lch.hue);
        }
        return default-color;
    }

    // base palette
    out property <brush> background: dark-color-scheme ? #1C1C1C : #FAFAFA;
    out property <brush> foreground: dark-color-scheme ? #FFFFFF : #000000E6;
    out property <brush> alternate-background: dark-color-scheme ? #2C2C2C : #f0f0f0;
    out property <brush> alternate-foreground: dark-color-scheme ? #FFFFFF : #000000E6;
    out property <brush> control-background: dark-color-scheme ? #FFFFFF0F : #FFFFFFB3;
    out property <brush> control-foreground: dark-color-scheme ? #FFFFFF : #000000E6;
    out property <brush> accent-background: dark-color-scheme ? accentify(#60CDFF) : accentify(#005FB8);
    out property <brush> accent-foreground: dark-color-scheme ? #000000 : #FFFFFF;
    out property <brush> selection-background: accentify(#0078D4);
    out property <brush> selection-foreground: dark-color-scheme ? #000000 : #FFFFFF;
    out property <brush> border: dark-color-scheme ? #FFFFFF14 : #00000073;

    // additional palette
    out property <brush> secondary-accent-background: accent-background.with-alpha(0.9);
    out property <brush> tertiary-accent-background: accent-background.with-alpha(0.8);
    out property <brush> accent-disabled: dark-color-scheme ? #FFFFFF29 : #00000038;
    out property <brush> accent-control-border: dark-color-scheme ? @linear-gradient(180deg, #FFFFFF14 90.67%, #00000024 100%) : @linear-gradient(180deg, #FFFFFF14 90.67%, #00000066 100%);
    out property <brush> control-border: dark-color-scheme ? @linear-gradient(180deg, #FFFFFF17 0%, #00000012 8.33%) : @linear-gradient(180deg, #0000000F 90.58%, #00000029 100%);
    out property <brush> text-accent-foreground-secondary: dark-color-scheme ? #00000080 : #FFFFFFB3;
    out property <brush> text-accent-foreground-disabled: dark-color-scheme ? #FFFFFF87 : #FFFFFF;
    out property <brush> text-secondary: dark-color-scheme ? #FFFFFFC9 : #00000099;
    out property <brush> text-tertiary: dark-color-scheme ? #FFFFFF8A : #00000073;
    out property <brush> text-disabled: dark-color-scheme ? #FFFFFF5E : #0000005E;
    out property <brush> text-control-border: dark-color-scheme ? @linear-gradient(180deg, #FFFFFF14 99.98%, #FFFFFF8A 100%, #FFFFFF8A 100%) : @linear-gradient(180deg, #0000000F 99.99%, #00000073 100%, #00000073 100%);
    out property <brush> control-secondary: dark-color-scheme ? #FFFFFF14 : #F9F9F980;
    out property <brush> control-tertiary: dark-color-scheme ? #FFFFFF08 : #F9F9F94D;
    out property <brush> control-disabled: dark-color-scheme ? #FFFFFF0A : #F9F9F94D;
    out property <brush> control-alt-secondary: dark-color-scheme ? #0000001A : #00000005;
    out property <brush> control-alt-tertiary: dark-color-scheme ? #FFFFFF0A : #0000000F;
    out property <brush> control-alt-quartiary: dark-color-scheme ? #FFFFFF12 : #00000017;
    out property <brush> control-alt-disabled: transparent;
    out property <brush> control-strong-stroke: dark-color-scheme ? #FFFFFF99 : #00000099;
    out property <brush> control-strong-stroke-disabled: dark-color-scheme ? #FFFFFF29 : #00000038;
    out property <brush> control-solid: dark-color-scheme ? #454545 : #FFFFFF;
    out property <brush> circle-border: dark-color-scheme ? @linear-gradient(180deg, #FFFFFF17 0%, #FFFFFF12 100%) : @linear-gradient(180deg, #0000000F 0%, #00000029 100%);
    out property <brush> control-input-active: dark-color-scheme ? #1E1E1EB3 : #FFFFFF;
    out property <brush> focus-stroke-inner: dark-color-scheme ? #000000B3 : #FFFFFF;
    out property <brush> focus-stroke-outer: dark-color-scheme ? #FFFFFF : #000000E6;
    out property <brush> control-background-stroke-flyout: dark-color-scheme ? #00000033 : #0000000F;
    out property <brush> sub-title-secondary: dark-color-scheme ? #FFFFFF0F : #0000000A;
    out property <brush> sub-title-tertiary: dark-color-scheme ? #FFFFFF0A : #00000005;
    out property <brush> shadow: dark-color-scheme ? #00000042 : #00000024;
    out property <brush> subtle: dark-color-scheme ? #FFFFFF0F : #0000000A;
    out property <brush> subtle-secondary: dark-color-scheme ? #FFFFFF0F : #0000000A;
    out property <brush> subtle-tertiary: dark-color-scheme ? #FFFFFF0A : #00000005;
    out property <brush> divider: dark-color-scheme ? #FFFFFF14 : #00000014;
    out property <brush> layer-on-mica-base-alt: dark-color-scheme ? #3A3A3A73 : #FFFFFFB3;
    out property <brush> layer-on-mica-base-alt-secondary: dark-color-scheme ? #FFFFFF0F : #0000000A;
    out property <brush> card-stroke: dark-color-scheme ? #0000001A : #0000000F;
    out property <brush> state: dark-color-scheme ? #ffffff : #000000;
    out property <brush> state-secondary: dark-color-scheme ? #000000 : #ffffff;
}

export global Icons {
    out property <image> arrow-down: @image-url("_arrow-down.svg");
    out property <image> arrow-up: @image-url("_arrow-up.svg");
    out property <image> check-mark: @image-url("_check-mark.svg");
    out property <image> chevron-down: @image-url("_chevron-down.svg");
    out property <image> chevron-up: @image-url("_chevron-up.svg");
    out property <image> down: @image-url("_down.svg");
    out property <image> dropdown: @image-url("_dropdown.svg");
    out property <image> left: @image-url("_left.svg");
    out property <image> right: @image-url("_right.svg");
    out property <image> up: @image-url("_up.svg");
    out property <image> keyboard: @image-url("_keyboard.svg");
    out property <image> clock: @image-url("_clock.svg");
    out property <image> arrow-back: @image-url("_arrow_back.svg");
    out property <image> arrow-forward: @image-url("_arrow_forward.svg");
    out property <image> edit: @image-url("_edit.svg");
    out property <image> calendar: @image-url("_calendar.svg");
}

export global FluentSizeSettings {
    out property <length> item-height: 40px;
}