import QtQml
import QtQuick
import Quickshell
import Custom as Custom
import QtQuick.Controls
import QtQuick.Layouts

Item {
  width: clock.contentWidth
  height: parent.height
  anchors.verticalCenter: parent.verticalCenter

  MouseArea {
    id: clockMouseArea

    anchors.fill: parent
    hoverEnabled: true
    enabled: true
  }

  Text {
    id: clock
    color: "white"

    anchors.verticalCenter: parent.verticalCenter

    Custom.Chrono {
      id: chrono
      format: "W{0:%V-%u} {0:%F} {0:%H:%M:%S%Ez}"
    }

    text: chrono.date

    font.pointSize: 10
    font.family: "Fira Sans"
    font.features: { "tnum": 1 }
  }

  PopupWindow {
    anchor {
      item: clockMouseArea
      edges: Edges.Bottom
    }
    visible: clockMouseArea.containsMouse

    implicitWidth: yearCalendar.implicitWidth + 16
    implicitHeight: yearCalendar.implicitHeight + 16
    color: "black"

    GridLayout {
      property int year: { const d = new Date(); return d.getFullYear(); }

      id: yearCalendar

      columns: 3
      columnSpacing: 16
      rowSpacing: 16

      anchors.centerIn: parent

      Repeater {
	model: 12

	GridLayout {
	  columns: 2

	  required property int index
	  property int month: index

	  id: monthCalendar

	  Layout.alignment: Qt.AlignTop | Qt.AlignRight
	  Layout.fillWidth: false

	  Text {
	    Layout.column: 1
	    Layout.fillWidth: true

	    horizontalAlignment: Text.AlignHCenter

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

	    text: {
	      const date = Date.fromLocaleDateString(Qt.locale(), `${yearCalendar.year}-${monthCalendar.month + 1}-01`, "yyyy-M-dd");
	      return date.toLocaleString(Qt.locale("en_DK"), "MMMM")
	    }

	    color: "#ffead3"
	  }

	  DayOfWeekRow {
	    locale: grid.locale

	    Layout.row: 1
	    Layout.column: 1
	    Layout.fillWidth: true

	    delegate: Text {
	      required property string shortName

	      font.pointSize: 10
	      font.family: "Fira Mono"

	      text: shortName
	      color: "#ffcc66"

	      horizontalAlignment: Text.AlignRight
	      verticalAlignment: Text.AlignVCenter
	    }
	  }

	  WeekNumberColumn {
	    month: grid.month
	    year: grid.year
	    locale: grid.locale

	    Layout.fillHeight: true

	    delegate: Text {
	      required property int weekNumber

	      opacity: {
		const simple = new Date(weekNumber == 1 && monthCalendar.month == 12 ? yearCalendar.year + 1 : yearCalendar.year, 0, 1 + (weekNumber - 1) * 7);
		const dayOfWeek = simple.getDay();
		const isoWeekStart = simple;

		isoWeekStart.setDate(simple.getDate() - dayOfWeek + 1);
		if (dayOfWeek > 4) {
		    isoWeekStart.setDate(isoWeekStart.getDate() + 7);
		}

		for (let i = 0; i < 7; i++) {
		  const dayInWeek = isoWeekStart;
		  dayInWeek.setDate(dayInWeek.getDate() + i);
		  if (dayInWeek.getMonth() == monthCalendar.month)
		    return 1;
		}

		return 0;
	      }

	      font.pointSize: 10
	      font.family: "Fira Sans"
	      font.features: { "tnum": 1 }

	      text: weekNumber
	      color: "#99ffdd"

	      horizontalAlignment: Text.AlignRight
	      verticalAlignment: Text.AlignVCenter
	    }
	  }

	  MonthGrid {
	    id: grid

	    year: yearCalendar.year
	    month: monthCalendar.month
	    locale: Qt.locale("en_DK")

	    Layout.fillWidth: true
	    Layout.fillHeight: true

	    delegate: Text {
		required property var model

		opacity: model.month === monthCalendar.month ? 1 : 0

		font.pointSize: 10
		font.family: "Fira Sans"
		font.features: { "tnum": 1 }

		text: model.day
		color: model.today ? "#ff6699" : "white"

		horizontalAlignment: Text.AlignRight
		verticalAlignment: Text.AlignVCenter
	    }
	  }
	}
      }
    }
  }
}