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
	IconImage {
	    source: Quickshell.iconPath("clock-applet-symbolic")
	    implicitSize: Config.iconSize
	    layer.enabled: true
	    layer.effect: MultiEffect {
		colorization: 1.0
		colorizationColor: Colors.text
		brightness: 0.5
	    }
	}
	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 }
	}
}