class CalendarInfo extends View {
	build(element) {
        this.titleLabel = document.createElement("span");
        this.titleLabel.className = "title-label";
        element.appendChild(this.titleLabel);

		this.totalLabel = document.createElement("span");
        this.totalLabel.className = "total-label";
        element.appendChild(this.totalLabel);

        this.targetContainer = document.createElement("span");
        this.targetContainer.className = "target-container";
        element.appendChild(this.targetContainer);

        const targetSeparator = document.createElement("span");
        targetSeparator.className = "target-separator";
        targetSeparator.innerText = " / ";
        this.targetContainer.appendChild(targetSeparator);

        this.targetLabel = document.createElement("span");
        this.targetLabel.className = "target-label";
        this.targetContainer.appendChild(this.targetLabel);

		const suffixLabel = document.createElement("span");
        suffixLabel.className = "suffix-label";
        suffixLabel.innerText = " h";
        element.appendChild(suffixLabel);

		return element;
	}

    setValues(total, target = null) {
        this.totalLabel.innerText = total;

        if (target !== null) {
            this.targetContainer.style.display = "";
            this.targetLabel.innerText = target;
        }
        else {
            this.targetContainer.style.display = "none";
        }
    }

    setTitle(title) {
        this.titleLabel.innerText = title;
    }
}

UIKit.registerViewType(CalendarInfo, "calendar-info");