import { Data } from "data.slint";

export component LoginOptionTile inherits Rectangle {
    in property <image> icon;
    in property <string> label;
    in property <int> index;
    in property <bool> has_focus;

    callback on_click();

    background: rgba(0, 0, 0, 0.5);

    Image {
        width: Data.selected_index == index ? root.width * 0.65: root.width * 0.5;
        height: Data.selected_index == index ? root.height * 0.65: root.height * 0.5;

        animate width, height {
             duration: 150ms;
        }

        source: icon;
    }

    area := TouchArea {
        width: parent.width;
        height: parent.height;
        z: 1;

        clicked => {
            root.on_click()
        }
    }

    hover_rect := Rectangle {
        width: parent.width - parent.width * 0.05;
        height: parent.height - parent.width * 0.05;
        background: rgba(0, 0, 0, area.has-hover || (has_focus && Data.selected_index == parent.index) ? 0.5 : 0.0);

        opacity: area.has-hover || Data.selected_index == parent.index ? 1.0 : 0.0;
        animate opacity { duration: 250ms; }
        animate background { duration: 250ms; }
        Text {
            height: parent.height;
            vertical-alignment: TextVerticalAlignment.bottom;
            color: rgba(240, 240, 240, 1);
            text: label;
            font-size: max(1rem, parent.height * 0.125);
            font-family: "monospace";
            max-width: parent.width;
            wrap: word-wrap;
        }
    }

    border-width: self.width * 0.025;
    border-radius: self.width * 0.025;
    border-color: Data.selected_index == self.index ? rgba(120, 120, 220, 0.5) : rgba(0, 0, 0, 0);

    animate border-color { duration: 250ms; }
}