import QtQml
import Quickshell
import QtQuick
import Quickshell.Widgets
import qs.Services

Item {
  id: root

  height: parent.height
  width: (timeWidget.visible ? timeWidget.label.contentWidth + 8 : 0) + (todayWidget.visible ? todayWidget.label.contentWidth + 8 : 0) + (icon.visible ? icon.implicitWidth + 8 : 0)
  anchors.verticalCenter: parent.verticalCenter

  component TextWidget : Item {
    id: textWidget

    visible: textWidget.state.state?.text ?? false

    required property var state
    property alias label: label
    property alias mouseArea: mouseArea

    anchors.verticalCenter: parent.verticalCenter
    implicitWidth: label.contentWidth + 8
    height: parent.height

    WrapperMouseArea {
      id: mouseArea

      anchors.fill: parent

      enabled: true
      hoverEnabled: true
      acceptedButtons: Qt.NoButton
      cursorShape: Qt.PointingHandCursor

      Item {
	anchors.fill: parent

	Text {
	  id: label

	  anchors.centerIn: parent

	  text: textWidget.state.state?.text ?? ""

	  font.pointSize: 10
	  font.family: "Fira Sans"
	  font.strikeout: textWidget.state.strikeout
	  color: {
	    if (textWidget.state.state?.class == "running")
	      return "white";
	    if (textWidget.state.state?.class == "over")
	      return "#f28a21";
	    return "#555";
	  }
	}
      }
    }
  }

  WrapperMouseArea {
    id: mouseArea

    anchors.fill: parent
    hoverEnabled: true

    cursorShape: Qt.PointingHandCursor
    onClicked: {
      Worktime.time.running = true;
      Worktime.today.running = true;
    }

    Rectangle {
      anchors.fill: parent
      color: {
	if (mouseArea.containsMouse)
	  return "#33808080";
	return "transparent";
      }

      Row {
	height: parent.height
	anchors.centerIn: parent
	spacing: 0

	TextWidget {
	  id: timeWidget
	  state: Worktime.time
	}

	TextWidget {
	  id: todayWidget
	  state: Worktime.today
	}

	MaterialDesignIcon {
	  id: icon

	  anchors.verticalCenter: parent.verticalCenter

	  implicitSize: 14

	  visible: !timeWidget.visible && !todayWidget.visible

	  icon: (Worktime.time.running || Worktime.today.running) ? "update" : "timer-off"
	  color: "#555"
	}
      }
    }
  }

  component WorktimePopup : PopupWindow {
    id: tooltip

    required property var state
    required property var mouseArea

    property bool nextVisible: (tooltipText.visible || tooltipIcon.visible) && (tooltip.mouseArea.containsMouse || tooltipMouseArea.containsMouse)

    anchor {
      item: tooltip.mouseArea
      edges: Edges.Bottom | Edges.Left
    }
    visible: false

    onNextVisibleChanged: hangTimer.restart()

    Timer {
      id: hangTimer
      interval: 100
      onTriggered: tooltip.visible = tooltip.nextVisible
    }

    implicitWidth: (tooltipIcon.visible ? tooltipIcon.implicitWidth : 0) + (tooltipIcon.visible && tooltipText.visible ? 8 : 0) + (tooltipText.visible ? tooltipText.implicitWidth : 0) + 16
    implicitHeight: tooltipText.implicitHeight + 16
    color: "black"

    WrapperMouseArea {
      id: tooltipMouseArea

      enabled: true
      hoverEnabled: true

      anchors.fill: parent

      Item {
        anchors.fill: parent

	Row {
	  id: tooltipLayout

	  anchors {
	    left: parent.left
	    top: parent.top
	    leftMargin: 8
	    topMargin: 8
	    verticalCenter: parent.verticalCenter
	  }

	  height: parent.height
	  width: childrenRect.width

	  spacing: 0

	  MaterialDesignIcon {
	    id: tooltipIcon

	    implicitSize: 14
  	    anchors.verticalCenter: parent.verticalCenter

	    visible: tooltip.state.running || !tooltip.state.updating

	    icon: tooltip.state.running ? "update" : "timer-off"
	  }

	  Item {
	    visible: tooltipIcon.visible && tooltipText.visible
	    height: parent.height
	    width: 8
	  }

	  Text {
	    id: tooltipText

	    visible: tooltip.state.state?.tooltip ?? false

  	    anchors.verticalCenter: parent.verticalCenter

	    font.pointSize: 10
	    font.family: "Fira Sans"
	    color: "white"

	    text: tooltip.state.state?.tooltip ?? ""
	  }
	}
      }
    }
  }

  WorktimePopup {
    state: Worktime.time
    mouseArea: timeWidget.mouseArea
  }
  WorktimePopup {
    state: Worktime.today
    mouseArea: todayWidget.mouseArea
  }
}