import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import { propOptional } from '../../../../utils/vue';
import { AppCondenseWhitespace } from '../../../../_common/condense-whitespace';
import { number } from '../../../../_common/filters/number';
import { Game } from '../../../../_common/game/game.model';
import AppGameThumbnail from '../../../../_common/game/thumbnail/thumbnail.vue';
import { Screen } from '../../../../_common/screen/screen-service';

export const GameGridRowSizeSm = 2;
export const GameGridRowSizeMd = 3;
export const GameGridRowSizeLg = 3;

let idCounter = 0;

@Component({
	components: {
		AppGameThumbnail,
		AppCondenseWhitespace,
	},
})
export default class AppGameGrid extends Vue {
	@Prop(propOptional(Array, () => [])) games!: Game[];
	@Prop(propOptional(Number, 0)) gamesCount!: number;
	@Prop(propOptional(Number, 0)) currentPage!: number;
	@Prop(propOptional(Boolean, false)) truncateToFit!: boolean;
	@Prop(propOptional(Boolean, false)) scrollable!: boolean;
	@Prop(propOptional(Boolean, false)) forceScrollable!: boolean;
	@Prop(propOptional(String)) eventLabel?: string;

	id = ++idCounter;

	readonly number = number;
	readonly Screen = Screen;

	get isScrollable() {
		return (Screen.isXs && this.scrollable) || this.forceScrollable;
	}

	/**
	 * Depending on the screen size, we want to only show a certain number of
	 * games. This will trim the last few games off if it can't fit within the
	 * rows completely.
	 */
	get processedGames() {
		const games = this.games;

		if (!this.truncateToFit || this.isScrollable) {
			return games;
		}

		let chunkSize = Math.max(1, Math.floor(games.length / this.rowSize)) * this.rowSize;

		// Subtract one for the ad slot.
		if (Screen.isDesktop && this.shouldShowAds) {
			chunkSize -= 1;
		}

		return games.slice(0, chunkSize);
	}

	get rowSize() {
		if (Screen.isSm) {
			return GameGridRowSizeSm;
		} else if (Screen.isMd) {
			return GameGridRowSizeMd;
		} else if (Screen.isLg) {
			return GameGridRowSizeLg;
		}

		return this.games.length;
	}

}
