import { Palette } from "std-widgets.slint";
import { CommentRow, FileRow, MarkdownBlock } from "types.slint";

export global IconTheme {
    in-out property <int> style: 0;
}

export global AppTheme {
    in-out property <int> mode: 0;
    private property <color> system-background: Palette.background;
    out property <bool> dark: mode == 2 || (mode == 0 && system-background.to-oklch().lightness < 0.5);
    out property <color> accent: dark ? #0a84ff : #0879e1;
    out property <color> accent-soft: dark ? #17324d : #e5f2fd;
    out property <color> page: dark ? #1c1c1e : #f2f2f7;
    out property <color> surface: dark ? #2c2c2e : #ffffff;
    out property <color> surface-muted: dark ? #3a3a3c : #f5f5f8;
    out property <color> header: dark ? #242426 : #f8f8fa;
    out property <color> toolbar: dark ? #242426 : #fbfbfc;
    out property <color> border: dark ? #48484a : #dedee3;
    out property <color> separator: dark ? #3a3a3c : #d8d8dd;
    out property <color> text: dark ? #f2f2f7 : #17171a;
    out property <color> text-secondary: dark ? #c7c7cc : #5f5f66;
    out property <color> text-tertiary: dark ? #8e8e93 : #85858c;
    out property <color> code-background: dark ? #242426 : #e9e9ed;
    out property <color> quote-background: dark ? #242426 : #f6f6f8;
    out property <color> loading-overlay: dark ? #00000088 : #ffffff88;
    changed mode => {
        Palette.color-scheme = mode == 1 ? ColorScheme.light : mode == 2 ? ColorScheme.dark : ColorScheme.unknown;
    }
}

export component AppIcon inherits Rectangle {
    in property <string> kind;
    in property <int> style: IconTheme.style;
    in property <color> icon-color: AppTheme.accent;
    background: transparent;

    private property <bool> duotone: root.style == 1;
    private property <bool> bold: root.style == 2;
    private property <bool> issue-kind: root.kind == "issues" || root.kind == "issue-open" || root.kind == "issue-close" || root.kind == "issue-reopen" || root.kind == "issue-comment";
    private property <bool> repository-kind: root.kind == "repositories" || root.kind == "repo-create" || root.kind == "repo-rename" || root.kind == "repo-star" || root.kind == "repo-watch" || root.kind == "update";
    private property <bool> pull-kind: root.kind == "pulls" || root.kind == "pull-open" || root.kind == "pull-merge" || root.kind == "pull-close" || root.kind == "pull-reopen" || root.kind == "pull-comment" || root.kind == "pull-approve" || root.kind == "pull-reject";
    private property <bool> tag-kind: root.kind == "tag-push" || root.kind == "tag-delete";
    private property <bool> branch-kind: root.kind == "branch-create" || root.kind == "branch-delete";
    private property <bool> closed-shape: root.kind == "home" || root.issue-kind || root.repository-kind || root.kind == "favorite" || root.kind == "favorite-filled" || root.tag-kind || root.kind == "release";
    private property <bool> has-badge: root.kind == "branch-create" || root.kind == "branch-delete" || root.kind == "push" || root.kind == "repo-create" || root.kind == "repo-rename" || root.kind == "repo-star" || root.kind == "repo-watch" || root.kind == "update" || root.kind == "issue-open" || root.kind == "issue-close" || root.kind == "issue-reopen" || root.kind == "issue-comment" || root.kind == "pull-open" || root.kind == "pull-merge" || root.kind == "pull-close" || root.kind == "pull-reopen" || root.kind == "pull-comment" || root.kind == "pull-approve" || root.kind == "pull-reject" || root.kind == "tag-push" || root.kind == "tag-delete";
    private property <bool> positive: root.kind == "issue-close" || root.kind == "pull-merge" || root.kind == "pull-approve";
    private property <bool> destructive: root.kind == "branch-delete" || root.kind == "pull-close" || root.kind == "pull-reject" || root.kind == "tag-delete";
    private property <color> badge-color: root.positive ? #20a866 : root.destructive ? #e45b4d : root.duotone ? #26bfd1 : root.icon-color;
    private property <string> shape: root.kind == "home"
        ? "M3 10.5 L12 3 L21 10.5 V21 H15 V14 H9 V21 H3 Z"
        : root.issue-kind
        ? "M4 5 H20 V9 C18 9 18 15 20 15 V19 H4 V15 C6 15 6 9 4 9 Z"
        : root.repository-kind
        ? "M6 3 H18 C19.1 3 20 3.9 20 5 V21 H6 C4.9 21 4 20.1 4 19 V5 C4 3.9 4.9 3 6 3 Z"
        : root.pull-kind
        ? "M7 4 V20 M17 4 V11 C17 15 14 17 10 17 M7 4 H7 M17 4 H17"
        : root.kind == "settings"
        ? "M12 3 V6 M12 18 V21 M3 12 H6 M18 12 H21 M5.6 5.6 L7.8 7.8 M16.2 16.2 L18.4 18.4 M18.4 5.6 L16.2 7.8 M7.8 16.2 L5.6 18.4"
        : root.kind == "back"
        ? (root.bold ? "M16 4 L7 12 L16 20 Z" : "M16 4 L7 12 L16 20")
        : root.kind == "filter"
        ? (root.bold ? "M3 5 H21 L14 13 V20 L10 22 V13 Z" : "M4 6 H20 M4 12 H20 M4 18 H20")
        : root.kind == "favorite" || root.kind == "favorite-filled"
        ? "M12 3 L14.8 8.7 L21 9.6 L16.5 14 L17.6 20.3 L12 17.3 L6.4 20.3 L7.5 14 L3 9.6 L9.2 8.7 Z"
        : root.kind == "disclosure"
        ? (root.bold ? "M8 4 L17 12 L8 20 Z" : "M8 4 L17 12 L8 20")
        : root.branch-kind
        ? "M7 4 V20 M7 11 C11 11 14 9 14 5"
        : root.kind == "push"
        ? "M4 8 H13 M4 12 H13 M4 16 H13"
        : root.tag-kind
        ? "M3 5 V13 L11 21 L21 11 L13 3 H5 C3.9 3 3 3.9 3 5 Z"
        : root.kind == "release"
        ? "M4 8 L12 4 L20 8 V18 L12 22 L4 18 Z"
        : "M12 4 V20 M4 12 H20";
    private property <string> detail: root.kind == "home"
        ? "M9 21 V14 H15 V21"
        : root.issue-kind
        ? "M12 8 V13 M12 16.5 V17"
        : root.repository-kind
        ? "M7 3 V21 M11 9 L8.5 12 L11 15 M15 9 L17.5 12 L15 15"
        : root.pull-kind
        ? "M7 4 A1.8 1.8 0 1 1 6.99 4 M7 20 A1.8 1.8 0 1 1 6.99 20 M17 4 A1.8 1.8 0 1 1 16.99 4"
        : root.kind == "settings"
        ? "M12 8 A4 4 0 1 1 11.99 8"
        : root.kind == "filter" && !root.bold
        ? "M9 4 V8 M15 10 V14 M8 16 V20"
        : root.tag-kind
        ? "M8 8 A1.5 1.5 0 1 1 7.99 8"
        : root.kind == "release"
        ? "M12 18 V8 M9 11 L12 8 L15 11 M7 6 V3 M17 6 V3"
        : "";
    private property <string> badge-detail: root.kind == "branch-create" || root.kind == "repo-create" || root.kind == "issue-open" || root.kind == "pull-open"
        ? "M18 15.5 V20.5 M15.5 18 H20.5"
        : root.kind == "issue-close" || root.kind == "pull-merge" || root.kind == "pull-approve"
        ? "M15.4 18 L17.2 19.8 L20.7 16.2"
        : root.kind == "branch-delete" || root.kind == "tag-delete"
        ? "M15.3 18 H20.7"
        : root.kind == "pull-close" || root.kind == "pull-reject"
        ? "M16 16 L20 20 M20 16 L16 20"
        : root.kind == "push" || root.kind == "tag-push"
        ? "M18 20.5 V15.5 M15.7 17.8 L18 15.5 L20.3 17.8"
        : root.kind == "repo-rename"
        ? "M15.3 20.6 L16 18 L19.7 14.3 L21.7 16.3 L18 20 Z"
        : root.kind == "repo-star"
        ? "M18 14.5 L19 16.7 L21.4 17 L19.6 18.7 L20.1 21 L18 19.8 L15.9 21 L16.4 18.7 L14.6 17 L17 16.7 Z"
        : root.kind == "repo-watch"
        ? "M14.5 18 C16.3 15.8 19.7 15.8 21.5 18 C19.7 20.2 16.3 20.2 14.5 18 M18 17 A1 1 0 1 1 17.99 17"
        : root.kind == "issue-reopen" || root.kind == "pull-reopen"
        ? "M20.8 17 A3 3 0 1 0 20.2 20.3 M20.8 17 H18.5 M20.8 17 V19.3"
        : root.kind == "issue-comment" || root.kind == "pull-comment"
        ? "M15.5 17 H20.5 V20 H18 L16 21 V20 H15.5 Z M17 18.5 H17.1 M19 18.5 H19.1"
        : root.kind == "update"
        ? "M18 14.8 L18.8 17.2 L21.2 18 L18.8 18.8 L18 21.2 L17.2 18.8 L14.8 18 L17.2 17.2 Z"
        : "";

    Path {
        width: 100%; height: 100%; viewbox-width: 24; viewbox-height: 24;
        commands: root.shape;
        fill: root.closed-shape ? (root.bold || root.kind == "favorite-filled" ? root.icon-color : root.duotone ? #26bfd133 : transparent) : transparent;
        stroke: root.closed-shape && (root.bold || root.kind == "favorite-filled") ? transparent : root.icon-color;
        stroke-width: root.bold ? 3px : root.duotone ? 2.2px : 1.8px;
        stroke-line-cap: round; stroke-line-join: round;
    }
    if root.detail != "": Path {
        width: 100%; height: 100%; viewbox-width: 24; viewbox-height: 24;
        commands: root.detail; fill: transparent;
        stroke: root.bold && root.closed-shape ? #ffffff : root.icon-color;
        stroke-width: root.bold ? 2.4px : 1.8px;
        stroke-line-cap: round; stroke-line-join: round;
    }
    if root.has-badge: Path {
        width: 100%; height: 100%; viewbox-width: 24; viewbox-height: 24;
        commands: "M18 13.5 A4.5 4.5 0 1 1 17.99 13.5 Z";
        fill: root.style == 0 ? AppTheme.surface : root.badge-color;
        stroke: root.style == 0 ? root.badge-color : #ffffff;
        stroke-width: root.style == 2 ? 1.5px : 1.2px;
    }
    if root.has-badge: Path {
        width: 100%; height: 100%; viewbox-width: 24; viewbox-height: 24;
        commands: root.badge-detail; fill: root.style == 0 ? transparent : #ffffff;
        stroke: root.style == 0 ? root.badge-color : #ffffff;
        stroke-width: root.bold ? 2px : 1.6px;
        stroke-line-cap: round; stroke-line-join: round;
    }
}

export component IconStyleChoice inherits Rectangle {
    in property <int> value;
    in property <string> label;
    callback clicked();
    background: IconTheme.style == root.value ? AppTheme.accent-soft : AppTheme.surface-muted;
    border-color: IconTheme.style == root.value ? AppTheme.accent : AppTheme.border;
    border-width: IconTheme.style == root.value ? 2px : 1px;
    border-radius: 11px;
    TouchArea { clicked => { root.clicked(); } }
    AppIcon { x: (parent.width - 30px) / 2; y: 10px; width: 30px; height: 30px; kind: "repositories"; style: root.value; }
    Text { y: 48px; width: 100%; text: root.label; font-size: 12px; font-weight: IconTheme.style == root.value ? 650 : 500; color: AppTheme.text; horizontal-alignment: center; }
}

export component AppearanceChoice inherits Rectangle {
    in property <int> value;
    in property <string> label;
    callback clicked();
    background: AppTheme.mode == root.value ? AppTheme.accent-soft : AppTheme.surface-muted;
    border-color: AppTheme.mode == root.value ? AppTheme.accent : AppTheme.border;
    border-width: AppTheme.mode == root.value ? 2px : 1px;
    border-radius: 11px;
    TouchArea { clicked => { root.clicked(); } }
    Text {
        width: 100%; height: 100%; text: root.label;
        font-size: 14px; font-weight: AppTheme.mode == root.value ? 650 : 500;
        color: AppTheme.mode == root.value ? AppTheme.accent : AppTheme.text;
        horizontal-alignment: center; vertical-alignment: center;
    }
}

export component Header inherits Rectangle {
    in property <string> title;
    in property <bool> can_back;
    in property <bool> can_filter: false;
    callback back();
    callback filter();
    height: 58px;
    width: 100%;
    background: AppTheme.header;
    border-color: AppTheme.border;
    border-width: 0px;

    if can_back: TouchArea {
        x: 8px; width: 54px;
        clicked => { root.back(); }
        AppIcon { x: 7px; y: 17px; width: 24px; height: 24px; kind: "back"; }
    }
    Text {
        x: root.can_back || root.can_filter ? 62px : 12px;
        width: parent.width - 2 * self.x;
        text: root.title;
        horizontal-alignment: center;
        vertical-alignment: center;
        font-size: 18px;
        font-weight: 600;
        color: AppTheme.text;
        overflow: elide;
    }
    if can_filter: TouchArea {
        x: parent.width - 58px; width: 58px;
        clicked => { root.filter(); }
        AppIcon { x: 17px; y: 17px; width: 24px; height: 24px; kind: "filter"; }
    }
    Rectangle { y: parent.height - 1px; height: 1px; background: AppTheme.border; }
}

export component EdgeBack inherits SwipeGestureHandler {
    callback back();
    width: 24px;
    height: 100%;
    handle-swipe-right: true;
    swiped => { root.back(); }
}

export component EmptyState inherits VerticalLayout {
    in property <string> title;
    in property <string> detail;
    alignment: center;
    spacing: 8px;
    Text { text: root.title; font-size: 21px; font-weight: 600; horizontal-alignment: center; color: AppTheme.text; }
    Text { text: root.detail; font-size: 15px; horizontal-alignment: center; wrap: word-wrap; color: AppTheme.text-secondary; }
}

export component MarkdownContent inherits VerticalLayout {
    in property <[MarkdownBlock]> blocks;
    spacing: 8px;

    for block in root.blocks: Rectangle {
        height: block.kind == "rule" ? 9px : rendered.preferred-height + (block.kind == "code" || block.kind == "table" ? 16px : 0px);
        background: block.kind == "code" || block.kind == "table" ? AppTheme.code-background : block.kind == "quote" ? AppTheme.quote-background : transparent;
        border-radius: block.kind == "code" || block.kind == "table" ? 7px : 0px;
        if block.kind == "quote": Rectangle { width: 3px; height: 100%; background: AppTheme.text-tertiary; border-radius: 2px; }
        if block.kind == "rule": Rectangle { y: 4px; width: 100%; height: 1px; background: AppTheme.separator; }
        rendered := StyledText {
            x: block.kind == "code" || block.kind == "table" ? 8px : block.kind == "quote" ? 11px : 0px;
            y: block.kind == "code" || block.kind == "table" ? 8px : 0px;
            width: parent.width - self.x - (block.kind == "code" || block.kind == "table" ? 8px : 0px);
            text: block.text;
            default-color: AppTheme.text;
            link-color: AppTheme.accent;
            default-font-family: block.kind == "code" || block.kind == "table" ? "monospace" : "";
            default-font-size: block.kind == "heading1" ? 24px : block.kind == "heading2" ? 21px : block.kind == "heading3" ? 19px : block.kind == "heading4" ? 17px : 16px;
        }
    }
}

export component CommentCard inherits Rectangle {
    in property <CommentRow> comment;
    height: content.preferred-height + 24px;
    background: AppTheme.surface;
    border-radius: 10px;
    content := VerticalLayout {
        x: 12px; y: 10px; width: parent.width - 24px;
        spacing: 5px;
        Text { text: root.comment.author; font-size: 13px; font-weight: 600; color: AppTheme.text; }
        MarkdownContent { width: parent.width; blocks: root.comment.body; }
        Text { text: root.comment.meta; font-size: 11px; color: AppTheme.text-tertiary; }
    }
}

export component FileCard inherits Rectangle {
    in property <FileRow> file;
    callback clicked();
    height: 66px;
    background: AppTheme.surface;
    border-color: AppTheme.border;
    border-width: 1px;
    border-radius: 10px;
    TouchArea { clicked => { root.clicked(); } }
    Text { x: 13px; y: 10px; width: parent.width - 26px; text: root.file.path; font-size: 14px; font-weight: 600; color: AppTheme.text; overflow: elide; }
    Text { x: 13px; y: 38px; width: parent.width - 26px; text: root.file.status; font-size: 12px; color: AppTheme.text-secondary; }
}

export component TabButton inherits Rectangle {
    in property <string> kind;
    in property <string> label;
    in property <bool> active;
    private property <length> icon-area-height: root.height * 3 / 4;
    private property <length> icon-size: min(42px, self.icon-area-height - 6px);
    callback clicked();
    background: transparent;
    TouchArea { clicked => { root.clicked(); } }
    AppIcon {
        x: (parent.width - root.icon-size) / 2;
        y: (root.icon-area-height - root.icon-size) / 2;
        width: root.icon-size; height: root.icon-size;
        kind: root.kind; icon-color: root.active ? AppTheme.accent : AppTheme.text-tertiary;
    }
    Text {
        y: root.icon-area-height; height: parent.height - self.y; width: 100%; text: root.label;
        color: root.active ? AppTheme.accent : AppTheme.text-tertiary; font-size: 9px;
        font-weight: root.active ? 600 : 400;
        horizontal-alignment: center; vertical-alignment: center;
    }
}

export component PullToRefreshGesture inherits SwipeGestureHandler {
    in property <bool> at_top;
    in property <bool> refreshing;
    callback refresh();
    enabled: root.at_top && !root.refreshing;
    handle-swipe-down: true;
    swiped => { root.refresh(); }
    @children
    if self.swiping: Rectangle {
        x: (parent.width - 142px) / 2; y: 8px; width: 142px; height: 32px;
        background: AppTheme.surface-muted; border-radius: 16px;
        Text { text: "Release to refresh"; font-size: 12px; color: AppTheme.text-secondary; horizontal-alignment: center; vertical-alignment: center; }
    }
}