// Playlist Manager folder icon square — a rounded color tile with either
// a custom image or one of the lucide preset glyphs. The background color
// is `folder.icon-color` (solid hex) or the accent when empty. Gradient
// folder colors are not supported (Slint brush limitation) and fall back
// to the accent in the Rust controller.

import { Theme } from "../foundation/semantic-colors.slint";
import { PmFolderItem } from "../state.slint";
import { QbzIcon } from "QbzIcon.slint";

export component PmFolderIcon inherits Rectangle {
    in property <PmFolderItem> folder;
    in property <length> size: 64px;
    in property <length> glyph-size: 32px;
    in property <length> radius: 12px;

    width: root.size;
    height: root.size;
    border-radius: root.radius;
    clip: true;
    // Resolved color -> that color; otherwise accent.
    background: root.folder.has-color ? root.folder.icon-color : Theme.accent;

    // Custom image (icon-type == "custom").
    if root.folder.has-custom-image: Image {
        width: 100%;
        height: 100%;
        source: root.folder.custom-image;
        image-fit: cover;
    }

    // Preset glyph (white over the color tile).
    if !root.folder.has-custom-image: QbzIcon {
        source:
            root.folder.icon-preset == "heart" ? @image-url("../assets/icons/heart.svg")
            : root.folder.icon-preset == "star" ? @image-url("../assets/icons/star.svg")
            : root.folder.icon-preset == "music" ? @image-url("../assets/icons/music.svg")
            : root.folder.icon-preset == "disc" ? @image-url("../assets/icons/disc.svg")
            : root.folder.icon-preset == "library" ? @image-url("../assets/icons/library.svg")
            : root.folder.icon-preset == "headphones" ? @image-url("../assets/icons/audio-lines.svg")
            : @image-url("../assets/icons/folder.svg");
        width: root.glyph-size;
        height: root.glyph-size;
        x: Math.round((parent.width - self.width) / 2 / 1px) * 1px;
        y: Math.round((parent.height - self.height) / 2 / 1px) * 1px;
        tint: #ffffff;
    }
}