// Copyright © SixtyFPS GmbH <info@slint-ui.com>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial

import { StateLayer } from "comp-state-layer.slint";
import { md } from "md.slint";

// A selectable item that is used by `StandardListView` and  `ComboBox`.
export component Item inherits Rectangle { 
    callback clicked <=> state-layer.clicked;

    in property<bool> selected;
    in property<string> text;

    // background: md.sys.color.background;
    height: 48px;

    state-layer := StateLayer {
        checked: root.selected;
        background: md.sys.color.primary;
        selection-background: md.sys.color.secondary-container; 
        ripple-color: md.sys.color.primary-ripple;
        has-ripple: true;
    }

    HorizontalLayout {
        padding-left: 12px;
        padding-right: 12px;

        label := Text {
            text: root.text;
            color: md.sys.color.on-surface;
            vertical-alignment: center;
            // FIXME after Roboto font can be loaded
            //font-family: md.sys.typescale.label-large.font;
            font-size: md.sys.typescale.label-large.size;
            font-weight: md.sys.typescale.label-large.weight;
        }
    }

    states [  
        selected when root.selected : {
            state-layer.background: md.sys.color.secondary-container; 
        }    
    ] 
}