class CardView extends DraggableView {
	build(element) {
		this.titleLabel = document.createElement("SPAN");
		this.titleLabel.className = "title-label";
		element.appendChild(this.titleLabel);

		this.descriptionLabel = document.createElement("DIV");
		this.descriptionLabel.className = "description-label";
		element.appendChild(this.descriptionLabel);

		this.bottomContainer = document.createElement("DIV");
		this.bottomContainer.className = "bottom-container";
		element.appendChild(this.bottomContainer);

		this.projectLabel = new DataLabel(document.createElement("span"), "project", "project_id", "name", false, " ");
		this.projectLabel.element.className = "project-label";
		this.bottomContainer.appendChild(this.projectLabel.element);

		this.visibilityIcon = document.createElement("img");
		this.visibilityIcon.className = "visibility-icon colored-icon-text";
		this.visibilityIcon.src = TimeCards.getResourceUri("Images/Public.webp");
		this.visibilityIcon.title = "Visible to: everyone";
		this.bottomContainer.appendChild(this.visibilityIcon);

		this.canvas = document.createElement("CANVAS");
		this.canvas.className = "dotcode-canvas";
		this.bottomContainer.appendChild(this.canvas);

		return element;
	}

	setCardData(cardData) {
		this.cardData = cardData;

		this.titleLabel.innerText = this.cardData.title;
		this.descriptionLabel.innerText = this.cardData.description;

		//Give project ID to project label.
		this.projectLabel.setKey(cardData.id_project);

		//Show or hide visibility icon.
		//TODO: Show user icons here when custom sharing is implemented.
		this.visibilityIcon.style.display = this.cardData.visibility == 0 ? "none" : "";

		this.generateDotcode();
	}

	generateDotcode() {
		if (!this.holeImage) {
			this.holeImage = new Image();
			this.holeImage.onload = this.generateDotcode.bind(this);
			this.holeImage.src = TimeCards.getResourceUri("Images/Card Hole.png");
			return;
		}

		if (!this.canvas.width) {
			this.canvas.width = this.canvas.clientWidth * 2;
			this.canvas.height = this.canvas.clientWidth;
		}

		var binaryString = "";
		var cardIdentifier = this.cardData.card_id + "_" + this.cardData.title;
		for (var i = 0; i < cardIdentifier.length; i++) {
			binaryString += cardIdentifier[i].charCodeAt(0).toString(2);
		}

		var g = this.canvas.getContext("2d");

		g.fillStyle = "#F5F3F1";
		g.fillRect(0, 0, this.canvas.width, this.canvas.height);

		var lines = 8;
		var columns = 16;
		var holeSize = ((this.canvas.width / columns) * 0.7);

		var holeDistance = (this.canvas.width - (holeSize * columns)) / (columns - 1);

		var characterToPin = "1";

		for (var y = 0; y < lines; y++) {
			for (var x = 0; x < columns; x++) {
				var characterIndex = (y * lines) + x;

				var binaryCharacter = "0";
				if (characterIndex < binaryString.length) {
					binaryCharacter = binaryString[characterIndex];
				}

				var holeX = (x * holeSize) + (x * holeDistance);
				var holeY = (y * holeSize) + (y * holeDistance);

				if (binaryCharacter == characterToPin) {
					g.clearRect(holeX, holeY, holeSize, holeSize);
					g.drawImage(this.holeImage, holeX, holeY, holeSize, holeSize);
				}

				if (characterToPin == "1") {
					characterToPin = "0";
				}
				else {
					characterToPin = "1";
				}
			}
		}
	}

	disableForTransfer() {
		if (!this.disabled) {
			this.disabled = true;
			this.element.classList.add("disabled");
		}
	}

	reenable() {
		if (this.disabled) {
			this.element.classList.remove("disabled");
			this.disabled = false;
		}
	}

	transferToCategoryView(newCategoryView) {
		this.categoryView = newCategoryView;
		this.categoryView.hideDummy();
		this.reenable();
	}

	mayBeDragged() {
		return (!this.categoryView ? false : !this.categoryView.collectionView.transferringCardView);
	}

	getDraggedData() {
		return this.cardData;
	}

	getDraggedDataType() {
		return "card";
	}

	getDragSourceView() {
		return this.categoryView;
	}

	onClicked() {
		if (this.categoryView) {
			var cardViewController = UIKit.getViewControllerById("card-view-controller");
			cardViewController.setCardData(this.cardData);
			this.viewController.presentModalViewController(cardViewController);
		}
	}

	onDragStart() {
		this.categoryView.showSourceDummy(this.element);
	}

	onDragEnd(droppedSomewhere) {
		this.categoryView.hideDummy();
	}
}

UIKit.registerViewType(CardView);