class CardView extends DraggableView {
	constructor(element) {
		super(element);

		this.cardProjectLoadedBound = this.cardProjectLoaded.bind(this);
	}

	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 = document.createElement("SPAN");
		this.projectLabel.className = "project-label";
		this.bottomContainer.appendChild(this.projectLabel);

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

		return element;
	}

	setCardData(cardData) {
		if (this.cardData && this.cardData.id_project != cardData.id_project) {
			TimeCards.dataManager.removeDataListener("project", this.cardProjectLoadedBound);
		}
		if (!this.cardData || this.cardData.id_project != cardData.id_project) {
			TimeCards.dataManager.addDataListener("project", {
				project_id: cardData.id_project
			}, this.cardProjectLoadedBound);
		}
		this.cardData = cardData;

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

		var project = cardData.id_project ? TimeCards.dataManager.getEntity("project", cardData.id_project) : null;
		if (project) {
			this.projectLabel.innerText = project.name;

			//Show or hide the card depending on the completion status of the project.
			this.element.style.display = (project.completed && this.categoryView ? "none" : "");
		}
		else {
			this.projectLabel.innerText = "";
		}

		this.generateDotcode();
	}

	cardProjectLoaded(projectId, project) {
		if (project) {
			this.projectLabel.innerText = project.name;

			//Show or hide the card depending on the completion status of the project.
			this.element.style.display = (project.completed && this.categoryView ? "none" : "");
		}
		else {
			this.projectLabel.innerText = "";
		}
	}

	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);