import { Component, Input, OnInit, Inject, HostBinding } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { ConstantsService } from 'src/app/shared/constants/constants.service';
import { UtilService } from 'src/app/core/services/util-service/util.service';
import { ComponentLinkService } from 'src/app/core/services/component-link-service/component-link.service';
import { Router, ActivatedRoute } from '@angular/router';

interface RelatedSequence {
	title: string;
	icon: string;
	linkObject: any;
	linkTitle: string;
	readMoreTitle: string;
	active: boolean;
}

@Component({
	selector: 'div[related-links-sequence]',
	templateUrl: './related-links-sequence-main.component.html',
	styleUrls: ['./related-links-sequence-main.component.scss']
})
export class RelatedLinksSequenceMainComponent implements OnInit {

	@Input() entity;

	sequences = [];

	@HostBinding('class') get class() { return 'col-md-12 space-between'; }

	constructor(
		@Inject(DOCUMENT) private doc,
		private constants: ConstantsService,
		private util: UtilService,
		private linkService: ComponentLinkService,
		private activatedRoute: ActivatedRoute
	) { }

	ngOnInit(): void {
		const entities = this.util.extract(this.entity, 'Entities');
		this.sequences = (entities ? entities : []).map(seq => this.resolveSequence(seq));
	}

	/** Get the position of a component based on its index. Used to switch placement in mobile view */
	getOrder(index): string {
		let classString = '';
		// No classes on desktop view
		if (this.inDesktopView()) {
			return classString;
		}
		if (index <= 1) {	// Regular order for first 2 elements
			const direction = this.getDirectionClass(index, 0);
			classString = `order-${index} ${direction}`;
		} else {
			const rowNumber = Math.floor(index / 2);
			const direction = this.getDirectionClass(index, rowNumber);

			const evenIndex = index % 2 === 0;
			const evenRow = rowNumber % 2 === 0;
			const oddAmountOfLinks = this.sequences.length % 2 !== 0;

			/**	Flip order of elements on odd rows
			 *  Even index + odd row number -> increase order by 1
			 *  Odd index + odd row number -> decrease order by 1
			 */
			if (index > 1 && evenIndex && !evenRow) {
				classString = `order-${index + 1} ${direction}`;
			} else if (index > 1 && !evenIndex && !evenRow) {
				classString = `order-${index - 1} ${direction}`;
			} else {
				classString = `order-${index} ${direction}`;
			}

			// Set last item to 100% width if there are odd number of links
			if (index === this.sequences.length - 1 && oddAmountOfLinks) {
				classString += ' w-100';
			}
		}

		return classString;
	}

	/** Get class for direction of arrow */
	getDirectionClass(index, rowNumber): string {
		// Last item should have no arrow
		if (index === this.sequences.length - 1) { return ''; }

		const evenIndex = index % 2 === 0;
		const evenRow = rowNumber % 2 === 0;

		/**
		 *  Even index + even row number -> right arrow.
		 *  Even index + odd row number -> left arrow.
		 *  Odd index + even row number -> right down arrow
		 * 	Odd index + odd row number -> left down arrow
		 */
		if (evenIndex) {
			return evenRow ? 'right-arrow' : 'left-arrow';
		} else {
			return evenRow ? 'right-down-arrow' : 'left-down-arrow';
		}
	}

	private resolveSequence(sequence): RelatedSequence {
		const linkObject = this.util.extract(sequence, 'LinkTargets', [0]);
		const linkUrl = this.linkService.getUrl(linkObject);

		return {
			title: this.util.extract(sequence, 'Title'),
			icon: this.util.extract(sequence, 'Icon'),
			linkObject: linkObject,
			linkTitle: this.linkService.getTitle(linkObject),
			readMoreTitle: this.util.extract(sequence, 'ReadMoreLinkTitle'),
			active: linkUrl === `/${this.activatedRoute.snapshot.url.join('/')}`
		};
	}

	/** Check if on desktop screen width */
	inDesktopView(): boolean {
		return (window.innerWidth || this.doc.documentElement.clientWidth) > this.constants.BOOTSTRAP_BREAKPOINTS.LG;
	}

	/** Check if on mobile screen width */
	inMobileView(): boolean {
		return (window.innerWidth || this.doc.documentElement.clientWidth) < this.constants.BOOTSTRAP_BREAKPOINTS.MD;
	}
}