import Quickshell
import Quickshell.Widgets
import QtQuick
import QtQuick.Layouts
import QtQuick.Effects
import qs
import qs.widgets
import qs.settings

BarComponent {
    id: root
    implicitWidth: clockLayout.width + 16
    SystemClock {
        id: clock
        precision: SystemClock.Seconds
    }
    active: clickHandler.containsMouse
    RowLayout {
	id: clockLayout
	anchors.centerIn: parent
	StyledIcon {
	    iconName: "clock-large"
	}
	StyledText {
            id: clockText
            text: Qt.formatDateTime(clock.date, toggleFormat ? "hh:mm:ss | dd.mm.yy" : "hh:mm:ss")
	    property bool toggleFormat: false
	}

    }
    	MouseArea {
	    id: clickHandler
	    anchors.fill: parent
	    cursorShape: Qt.PointingHandCursor
	    hoverEnabled: true
	    onClicked: { clockText.toggleFormat = !clockText.toggleFormat }
	}
}