class HippieTaskBar {
	constructor(element, placeholder, options) {
		this.element = element;
		this.placeholder = placeholder;
		this.date = null;
		this.time = null;
		this.isDragging = false;
		this.barSize = '';
		// TODO: Ergänzen und nicht ersetzen
		this.options = options || {
			direction: 0,
			position: 'bottom',
			date: {
				year: 'numeric',
				month: '2-digit',
				day: '2-digit'
			},
			time: {hour: '2-digit', minute: '2-digit'}
		};

		this.init();
	}

	// TODO: Ereignisse besser delegieren
	init() {
		this.element.addEventListener('pointerdown', this.onDown.bind(this));
		document.addEventListener('pointermove', this.onMove.bind(this));
		document.addEventListener('pointerup', this.onUp.bind(this));

		const clock = this.element.querySelector('.clock');
		const dateElement = document.createElement('span');
		const timeElement = document.createElement('span');
		const br = document.createElement('br');

		dateElement.id = 'date';
		timeElement.id = 'time';
		this.date = new DateDisplay(dateElement, this.options.date);
		this.time = new TimeDisplay(timeElement, this.options.time);

		// TODO: Reihenfolge anpassbar machen
		clock.appendChild(timeElement);
		clock.appendChild(br);
		clock.appendChild(dateElement);

		this.setOptions(this.options.position);
	}

	onDown(event) {
		if (checkButtonAndTarget(event, this.element, 0)) {
			console.debug('Drag mode enabled');

			this.isDragging = true;

			this.showPlaceholder();

			centerElementUnderCursor(event, this.placeholder);
		}

		event.preventDefault();
	}

	onMove(event) {
		if (this.isDragging) {
			this.options.position = getClosestEdgeToMouse(event);
			const borderRadius = '4px';
			const attributes = {
				top: {
					className: 'top',
					styles: {
						flexDirection: 'row',
						borderStyle: '',
						borderColor: '',
						borderTopStyle: 'solid',
						borderTopColor: 'white',
						borderTopRightRadius: '',
						borderBottomRightRadius: borderRadius,
						borderBottomLeftRadius: borderRadius,
						borderTopLeftRadius: ''
					}
				},
				right: {
					className: 'right',
					styles: {
						flexDirection: 'column',
						borderStyle: '',
						borderColor: '',
						borderRightStyle: 'solid',
						borderRightColor: 'white',
						borderTopRightRadius: '',
						borderBottomRightRadius: '',
						borderBottomLeftRadius: borderRadius,
						borderTopLeftRadius: borderRadius
					}
				},
				bottom: {
					className: 'bottom',
					styles: {
						flexDirection: 'row',
						borderStyle: '',
						borderColor: '',
						borderBottomStyle: 'solid',
						borderBottomColor: 'white',
						borderTopRightRadius: borderRadius,
						borderBottomRightRadius: '',
						borderBottomLeftRadius: '',
						borderTopLeftRadius: borderRadius
					}
				},
				left: {
					className: 'left',
					styles: {
						flexDirection: 'column',
						borderStyle: '',
						borderColor: '',
						borderLeftStyle: 'solid',
						borderLeftColor: 'white',
						borderTopRightRadius: borderRadius,
						borderBottomRightRadius: borderRadius,
						borderBottomLeftRadius: '',
						borderTopLeftRadius: ''
					}
				}
			};

			this.setAttributesAccordingToPosition(this.placeholder, this.options.position, attributes);
			centerElementUnderCursor(event, this.placeholder);
		}
	}

	onUp() {
		if (event.target === this.placeholder) {
			console.debug('Drag mode disabled');

			this.isDragging = false;

			this.snapToEdges();
			this.hidePlaceholder();
		}
	}

	showPlaceholder() {
		this.element.style.display = 'none';
		this.placeholder.style.display = 'flex';
	}

	hidePlaceholder() {
		this.placeholder.style.display = 'none';
		this.element.style.display = '';
	}

	snapToEdges() {
		this.setOptions(this.options.position);
		this.date.changeFormat(this.options.date, this.options.direction);
	}

	setAttributesAccordingToPosition(element, position, attributes) {
		element.classList.remove(...Object.values(attributes).map(pos => pos.className));
		Object.keys(attributes[position].styles).forEach(key => {
			element.style[key] = '';
		});

		element.classList.add(attributes[position].className);
		Object.entries(attributes[position].styles).forEach(([key, value]) => {
			element.style[key] = value;
		});
	}

	setOptions(position) {
		const attributes = {
			top: {
				className: 'top',
				styles: {
					top: '0', right: '0', bottom: '', left: '0',
					width: '', height: this.barSize,
					flexDirection: 'row'
				}
			},
			right: {
				className: 'right',
				styles: {
					top: '0', right: '0', bottom: '0', left: '',
					width: this.barSize, height: '',
					flexDirection: 'column'
				}
			},
			bottom: {
				className: 'bottom',
				styles: {
					top: '', right: '0', bottom: '0', left: '0',
					width: '', height: this.barSize,
					flexDirection: 'row'
				}
			},
			left: {
				className: 'left',
				styles: {
					top: '0',
					right: '',
					bottom: '0',
					left: '0',
					width: this.barSize,
					height: '',
					flexDirection: 'column'
				}
			}
		};

		this.setAttributesAccordingToPosition(this.element, position, attributes);

		switch (position) {
			case 'right':
			case 'left':
				this.options.date = {year: '2-digit', month: '2-digit', day: '2-digit'};
				this.options.direction = 1;
				break;
			case 'top':
			case 'bottom':
			default:
				this.options.date = {year: 'numeric', month: '2-digit', day: '2-digit'};
				this.options.direction = 0;
				break;
		}
	}
}