// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT

import { StateLayer } from "../components/state_layer.slint";
import { ScrollView } from "scroll_view.slint";
import { Theme } from "../theme.slint";
import { Images } from "../images.slint";
import { StateLayer } from "../components/state_layer.slint";

component ListViewItem {
    in property <string> text <=> i-text.text;
    in property <bool> selected;

    callback clicked <=> i-state-layer.clicked;

    min-height: 40px;

    states [
        selected when selected : {
            i-container.border-color: Theme.palette.lemon-green;
            i-icon.visible: true;
        }
    ]

    i-container := Rectangle {
        background: Theme.palette.dark-deep-blue;
        border-radius: 4px;
        border-width: 1px;
        border-color: Theme.palette.slint-blue-400;
    }

    HorizontalLayout {
        padding-left: Theme.spaces.medium;
        padding-top: Theme.spaces.medium;
        padding-bottom: Theme.spaces.medium;
        padding-right: Theme.spaces.medium;
        spacing: Theme.spaces.medium;
        accessible-role: list-item;
        accessible-item-selectable: true;
        accessible-item-selected: root.selected;

        i-text := Text {
            horizontal-stretch: 1;
            color: Theme.palette.white;
            font-size: Theme.typo.description.size;
            font-weight: Theme.typo.description.weight;
            vertical-alignment: center;
        }

        i-icon := Image {
            horizontal-stretch: 0;
            visible: false;
            source: Images.check;
            colorize: Theme.palette.lemon-green;
        }
     }

     i-state-layer := StateLayer {
        width: i-container.width;
        height: i-container.height;
        border-radius: i-container.border-radius;
    }
}

export component ListView {
    in property <[StandardListViewItem]> model;
    in-out property <int> selected-index;

    callback selection-changed(/* index */ int);

    function select(index: int) {
        selected-index = index;
        selection-changed(index);
    }

    i-scroll-view := ScrollView {
       i-blub := VerticalLayout {
            alignment: start;
            spacing: Theme.spaces.medium;

            for item[index] in model : ListViewItem {
                clicked => {
                    select(index);
                }

                private property <length> offset: i-scroll-view.viewport-y + index * (self.height + parent.spacing);

                text: item.text;
                selected: index == selected-index;

                animate opacity { duration: Theme.durations.fast;  }
            }
       }
    }
}