pragma ComponentBehavior: Bound

import QtQuick

Rectangle {
    id: base
    anchors {
        fill: parent
        margins: 2
    }
    color: colours[0]

    required property string format
    required property var colours
    property var clock: genClock(format)
    property var date: new Date()
    property string time: date.toLocaleString(Qt.locale())
    property int cols: getColSum(clock)
    property real colWidth: (base.width - topgrid.spacing - base.anchors.margins) / cols

    property var keys: {
        "a": [(date.getHours() > 11) | 0, -1],
        "H": [-1].concat(binarise(date.getHours(), 5)),
        "h": binarise(date.getHours() % 12, 4),
        "m": binarise(date.getMinutes(), 6),
        "s": binarise(date.getSeconds(), 6)
    }

    function genClock(format) {
        return format.split('').map(k => keys[k]);
    }

    function getColSum(clock) {
        return clock.map(x => Math.ceil(x.length / 2)).reduce((acc, el) => acc + el);
    }

    function binarise(n, p) {
        return n.toString(2) // to base-2 string
        .padStart(p, 0) // zero pad
        .split('') // split to array
        .slice(-p) // take only desired bits, lsb first
        .map(x => parseInt(x)); // map to int
    }
    Grid {
        id: topgrid
        rows: 1
        columns: base.clock.length
        spacing: 2
        anchors.fill: parent

        Repeater {
            model: base.clock.length
            Grid {
                id: inner
                required property int index
                property var bits: base.clock[index]
                property int cols: bits.length / 2
                width: base.colWidth * cols
                height: base.height
                rows: 2
                columns: cols
                spacing: 1

                function calcBitSize() {
                    let cell = inner.width - inner.spacing * 2;
                    let def = (cell / inner.cols);
                    return (def > inner.height / 2) ? inner.height / 2 : def;
                }

                Repeater {
                    model: inner.bits.length
                    Rectangle {
                        required property int index
                        height: inner.calcBitSize()
                        width: height
                        color: "transparent"
                        Rectangle {
                            property int bit: inner.bits[parent.index]
                            property string on: base.colours[1]
                            property string off: base.colours[0]
                            anchors {
                                horizontalCenter: parent.horizontalCenter
                                verticalCenter: parent.verticalCenter
                            }
                            height: parent.height
                            width: parent.width
                            
                            border.width: 1
                            border.color: bit == -1 ? off : on
                            color: (bit == -1 || !bit) ? off : on
                            Behavior on color {
                                ColorAnimation {
                                    duration: 150
                                }
                            }
                            radius: height

                            // 
                            // height: bit ? parent.height / 3 * 2 : parent.height
                            // Behavior on height {
                            //     NumberAnimation {
                            //         duration: 50
                            //     }
                            // }
                            // width: bit ? 1 : height
                            // Behavior on width {
                            //     NumberAnimation {
                            //         duration: 50
                            //     }
                            // }
                            // radius: bit ? 0 : height
                            // Behavior on radius {
                            //     NumberAnimation {
                            //         duration: 50
                            //     }
                            // }

                        }
                    }
                }
            }
        }

        Timer {
            interval: 1000
            running: true
            repeat: true
            onTriggered: {
                base.date = new Date();
            }
        }
    }
}
