export component Badge inherits VerticalLayout {
    in property <string> text <=> txt.text;
    in property <bool> interactive: false;

    callback clicked;

    alignment: center;
    opacity: 0.8;

    states [
        hovered when self.interactive && touch.has-hover: {
            opacity: 1.0;
            rect.background: #456;
        }
    ]

    rect := Rectangle {
        vertical-stretch: 0;
        horizontal-stretch: 0;

        background: #3e3e3e;
        border-radius: self.height / 2;
        height: txt.preferred-height + 2px;
        width: txt.preferred-width + 12px;

        txt := Text {
            text: 123;
            color: white;
            font-size: 10px;
        }

        touch := TouchArea {
            clicked => { root.clicked(); }
            mouse-cursor: root.interactive ? pointer : default;
        }
    }
}

export component SmallButton inherits Rectangle {
    in property text <=> i-text.text;
    in property tooltip <=> i-tooltip.text;
    in property tooltip-font-family <=> i-tooltip.font-family;
    out property <bool> has-hover: i-touch.has-hover;

    callback clicked;

    border-radius: self.height / 4;
    background: i-touch.has-hover ? #5e5e5e : #2e2e2e;
    border-color: i-touch.has-hover ? #6e6e6e : #3e3e3e;
    border-width: 1px;
    preferred-width: i-text.preferred-width + 5px;
    min-width: self.height;
    height: i-text.preferred-height + 5px;

    i-text := Text {
        vertical-alignment: center;
    }
    i-touch := TouchArea {
        clicked => { root.clicked() }
        mouse-cursor: pointer;
    }

    Rectangle {
        background: #000000;
        border-radius: self.height / 4;
        opacity: root.has-hover ? 1.0 : 0;
        width: i-tooltip.preferred-width + 8px;
        height: i-tooltip.preferred-height + 4px;
        x: -(root.has-hover ? 5px : 0) - self.width;
        y: (root.height - self.height) / 2;

        animate opacity, x {
            duration: 100ms;
        }

        i-tooltip := Text {}
    }
}

export component CurrencyIcon inherits Image {
    in property <int> cmc-id;
    width: 14px;
    source: cmc-id == 1 ? @image-url("icons/coins/1.png") :
            cmc-id == 2 ? @image-url("icons/coins/2.png") :
            cmc-id == 5 ? @image-url("icons/coins/5.png") :
            cmc-id == 8 ? @image-url("icons/coins/8.png") :
            cmc-id == 52 ? @image-url("icons/coins/52.png") :
            cmc-id == 66 ? @image-url("icons/coins/66.png") :
            cmc-id == 118 ? @image-url("icons/coins/118.png") :
            cmc-id == 131 ? @image-url("icons/coins/131.png") :
            cmc-id == 328 ? @image-url("icons/coins/328.png") :
            cmc-id == 372 ? @image-url("icons/coins/372.png") :
            cmc-id == 512 ? @image-url("icons/coins/512.png") :
            cmc-id == 825 ? @image-url("icons/coins/825.png") :
            cmc-id == 873 ? @image-url("icons/coins/873.png") :
            cmc-id == 1027 ? @image-url("icons/coins/1027.png") :
            cmc-id == 1437 ? @image-url("icons/coins/1437.png") :
            cmc-id == 1447 ? @image-url("icons/coins/1447.png") :
            cmc-id == 1567 ? @image-url("icons/coins/1567.png") :
            cmc-id == 1720 ? @image-url("icons/coins/1720.png") :
            cmc-id == 1759 ? @image-url("icons/coins/1759.png") :
            cmc-id == 1831 ? @image-url("icons/coins/1831.png") :
            cmc-id == 1839 ? @image-url("icons/coins/1839.png") :
            cmc-id == 1966 ? @image-url("icons/coins/1966.png") :
            cmc-id == 2281 ? @image-url("icons/coins/2281.png") :
            cmc-id == 2282 ? @image-url("icons/coins/2282.png") :
            cmc-id == 2790 ? @image-url("icons/coins/2790.png") :
            cmc-id == 3408 ? @image-url("icons/coins/3408.png") :
            cmc-id == 4172 ? @image-url("icons/coins/4172.png") :
            cmc-id == 4195 ? @image-url("icons/coins/4195.png") :
            cmc-id == 4687 ? @image-url("icons/coins/4687.png") :
            cmc-id == 7950 ? @image-url("icons/coins/7950.png") :
            cmc-id == 8104 ? @image-url("icons/coins/8104.png") :
            cmc-id == 12186 ? @image-url("icons/coins/12186.png") :
            cmc-id == 14112 ? @image-url("icons/coins/14112.png") :
            cmc-id == 20314 ? @image-url("icons/coins/20314.png") :
            @image-url("");
}

export component Cell inherits HorizontalLayout {
    horizontal-stretch: 1;
    preferred-width: 0;
    min-width: 0;
    spacing: 5px;
}

export component TouchCell inherits TouchArea {
    horizontal-stretch: 1;
    preferred-width: 0;
    min-width: 0;
}

export component ElidingText inherits Text {
    overflow: elide;
    vertical-alignment: center;
}

export component TextCell inherits ElidingText {
    horizontal-stretch: 1;
    preferred-width: 0;
    min-width: 0;
}

export component MonoTextCell inherits TextCell {
    font-family: "DejaVu Sans Mono";
    horizontal-alignment: right;
}

export component CurrencyCell inherits Cell {
    in property <string> currency;
    in property <int> cmc-id;

    callback clicked <=> currency-touch.clicked;

    spacing: 0;

    Rectangle {
        background: currency-touch.has-hover ? #456 : transparent;
        border-radius: self.height / 4;

        HorizontalLayout {
            padding-left: 8px;
            padding-right: 8px;
            padding-top: 4px;
            padding-bottom: 4px;
            spacing: 5px;

            CurrencyIcon {
                cmc-id: root.cmc-id;
            }
            ElidingText {
                font-family: "DejaVu Sans Mono";
                max-width: self.preferred-width;
                text: root.currency;
            }
        }

        currency-touch := TouchArea {
            mouse-cursor: pointer;
        }
    }
    Rectangle {}
}

export component TableHeader inherits VerticalLayout {
    spacing: 2px;
    vertical-stretch: 0;
    // width: view.visible-width;   // what we want, but causes binding loop
    in property <length> horizontal-padding-left: 5px;
    in property <length> horizontal-padding-right: 15px;    // additional padding for overlay scrollbar
    in property <bool> separator: true;
    out property <length> item-spacing <=> layout.spacing;

    layout := HorizontalLayout {
        padding-left: 2px + root.horizontal-padding-left;
        padding-right: 2px + root.horizontal-padding-right;
        padding-top: 2px;
        padding-bottom: 2px;
        spacing: 6px;

        @children
    }

    if (separator): Rectangle {
        height: 1px;
        background: white;
        opacity: 0.25;
    }
}

export component HeaderCell inherits ElidingText {
    horizontal-stretch: 1;
    preferred-width: 0;
    min-width: 0;
    opacity: 0.8;
    font-size: 10px;
}

export component DateTimeCell inherits HorizontalLayout {
    in property <string> date <=> date-text.text;
    in property <string> time <=> time-text.text;

    alignment: start;
    spacing: 6px;
    padding-left: 6px;
    padding-right: 6px;

    date-text := ElidingText {
        min-width: self.preferred-width;
        text: "2013-10-30";
    }
    time-text := ElidingText {
        opacity: 0.5;
        font-size: 10px;
        min-width: self.preferred-width;
        text: "12:34:56";
    }
}