import { Component, Inject, Watch } from 'vue-property-decorator';
import { getAbsoluteLink } from '../../../../../../utils/router';
import { Api } from '../../../../../../_common/api/api.service';
import AppCard from '../../../../../../_common/card/card.vue';
import { Clipboard } from '../../../../../../_common/clipboard/clipboard-service';
import AppCommentAddButton from '../../../../../../_common/comment/add-button/add-button.vue';
import { canCommentOnModel, Comment } from '../../../../../../_common/comment/comment-model';
import {
	CommentStoreManager,
	CommentStoreManagerKey,
	getCommentStore,
} from '../../../../../../_common/comment/comment-store';
import { CommentModal } from '../../../../../../_common/comment/modal/modal.service';
import {
	CommentThreadModal,
	CommentThreadModalPermalinkDeregister,
} from '../../../../../../_common/comment/thread/modal.service';
import { configShareCard } from '../../../../../../_common/config/config.service';
import AppContentViewer from '../../../../../../_common/content/content-viewer/content-viewer.vue';
import { Environment } from '../../../../../../_common/environment/environment.service';
import AppFadeCollapse from '../../../../../../_common/fade-collapse/fade-collapse.vue';
import { number } from '../../../../../../_common/filters/number';
import { FiresidePost } from '../../../../../../_common/fireside/post/post-model';
import AppGameExternalPackageCard from '../../../../../../_common/game/external-package/card/card.vue';
import { Game } from '../../../../../../_common/game/game.model';
import AppGameMediaBar from '../../../../../../_common/game/media-bar/media-bar.vue';
import AppGamePackageCard from '../../../../../../_common/game/package/card/card.vue';
import AppGameSoundtrackCard from '../../../../../../_common/game/soundtrack/card/card.vue';
import { AppLazyPlaceholder } from '../../../../../../_common/lazy/placeholder/placeholder';
import { Meta } from '../../../../../../_common/meta/meta-service';
import { BaseRouteComponent, RouteResolver } from '../../../../../../_common/route/route-component';
import { Screen } from '../../../../../../_common/screen/screen-service';
import AppShareCard from '../../../../../../_common/share/card/card.vue';
import { ActivityFeedService } from '../../../../../components/activity/feed/feed-service';
import AppActivityFeedPlaceholder from '../../../../../components/activity/feed/placeholder/placeholder.vue';
import { ActivityFeedView } from '../../../../../components/activity/feed/view';
import AppCommentOverview from '../../../../../components/comment/overview/overview.vue';
import AppGameCommunityBadge from '../../../../../components/game/community-badge/community-badge.vue';
import AppGameOgrs from '../../../../../components/game/ogrs/ogrs.vue';
import { AppGamePerms } from '../../../../../components/game/perms/perms';
import { AppActivityFeedLazy } from '../../../../../components/lazy';
import AppPageContainer from '../../../../../components/page-container/page-container.vue';
import AppPostAddButton from '../../../../../components/post/add-button/add-button.vue';
import AppRatingWidget from '../../../../../components/rating/widget/widget.vue';
import AppUserKnownFollowers from '../../../../../components/user/known-followers/known-followers.vue';
import { RouteStore, routeStore, RouteStoreModule } from '../view.store';
import AppDiscoverGamesViewOverviewDetails from './_details/details.vue';
import AppDiscoverGamesViewOverviewRecommended from './_recommended/recommended.vue';
import AppDiscoverGamesViewOverviewStatbar from './_statbar/statbar.vue';
import AppDiscoverGamesViewOverviewSupporters from './_supporters/supporters.vue';

@Component({
	name: 'RouteDiscoverGamesViewOverview',
	components: {
		AppPageContainer,
		AppDiscoverGamesViewOverviewDetails,
		AppDiscoverGamesViewOverviewRecommended,
		AppDiscoverGamesViewOverviewSupporters,
		AppDiscoverGamesViewOverviewStatbar,
		AppGameCommunityBadge,
		AppRatingWidget,
		AppCard,
		AppFadeCollapse,
		AppLazyPlaceholder,
		AppGameOgrs,
		AppGameExternalPackageCard,
		AppGamePackageCard,
		AppGameSoundtrackCard,
		AppGameMediaBar,
		AppCommentAddButton,
		AppCommentOverview,
		AppActivityFeed: AppActivityFeedLazy,
		AppActivityFeedPlaceholder,
		AppPostAddButton,
		AppGamePerms,
		AppContentViewer,
		AppUserKnownFollowers,
		AppShareCard,
	},
	filters: {
		number,
	},
})
@RouteResolver({
	lazy: true,
	cache: true,
	deps: { query: ['feed_last_id'] },
	resolver({ route }) {
		const gameId = parseInt(route.params.id, 10);

		return Api.sendRequest(ActivityFeedService.makeFeedUrl(route, apiOverviewUrl));
	},
	resolveStore({ payload, fromCache }) {
		routeStore.commit('processOverviewPayload', { payload, fromCache });
	},
})
export default class RouteDiscoverGamesViewOverview extends BaseRouteComponent {
	@Inject(CommentStoreManagerKey) commentManager!: CommentStoreManager;

	@RouteStoreModule.State
	isOverviewLoaded!: RouteStore['isOverviewLoaded'];

	@RouteStoreModule.State
	game!: RouteStore['game'];

	@RouteStoreModule.State
	mediaItems!: RouteStore['mediaItems'];

	@RouteStoreModule.State
	overviewComments!: RouteStore['overviewComments'];

	@RouteStoreModule.State
	userRating!: RouteStore['userRating'];

	@RouteStoreModule.State
	songs!: RouteStore['songs'];

	@RouteStoreModule.State
	userPartnerKey!: RouteStore['userPartnerKey'];

	@RouteStoreModule.State
	partnerLink!: RouteStore['partnerLink'];

	@RouteStoreModule.State
	partner!: RouteStore['partner'];

	@RouteStoreModule.State
	partnerKey!: RouteStore['partnerKey'];

	@RouteStoreModule.State
	supporters!: RouteStore['supporters'];

	@RouteStoreModule.State
	supporterCount!: RouteStore['supporterCount'];

	@RouteStoreModule.State
	shouldShowMultiplePackagesMessage!: RouteStore['shouldShowMultiplePackagesMessage'];

	@RouteStoreModule.State
	postsCount!: RouteStore['postsCount'];

	@RouteStoreModule.State
	packages!: RouteStore['packages'];

	@RouteStoreModule.State
	externalPackages!: RouteStore['externalPackages'];

	@RouteStoreModule.State
	hasReleasesSection!: RouteStore['hasReleasesSection'];

	@RouteStoreModule.State
	customGameMessages!: RouteStore['customGameMessages'];

	@RouteStoreModule.Mutation
	processOverviewPayload!: RouteStore['processOverviewPayload'];

	@RouteStoreModule.State
	showDetails!: RouteStore['showDetails'];

	@RouteStoreModule.Mutation
	toggleDetails!: RouteStore['toggleDetails'];

	@RouteStoreModule.Mutation
	setCanToggleDescription!: RouteStore['setCanToggleDescription'];

	@RouteStoreModule.Mutation
	setOverviewComments!: RouteStore['setOverviewComments'];

	@RouteStoreModule.State
	browserBuilds!: RouteStore['browserBuilds'];

	@RouteStoreModule.State
	knownFollowers!: RouteStore['knownFollowers'];

	@RouteStoreModule.State
	knownFollowerCount!: RouteStore['knownFollowerCount'];

	feed: ActivityFeedView | null = null;

	permalinkWatchDeregister?: CommentThreadModalPermalinkDeregister;

	readonly Screen = Screen;
	readonly Environment = Environment;

	get routeTitle() {
		if (this.game) {
			let title = this.$gettextInterpolate('%{ gameTitle } by %{ user }', {
				gameTitle: this.game.title,
				user: this.game.developer.display_name,
			});

			if (this.browserBuilds.length) {
				title += ' - ' + this.$gettext('Play Online');
			}

			return title;
		}
		return null;
	}

	get useShareCard() {
		return configShareCard.value && !this.ignoringSplitTest;
	}

	get ignoringSplitTest() {
		return Screen.isMobile;
	}

	get hasAnyPerms() {
		return this.game.hasPerms();
	}

	get hasDevlogPerms() {
		return this.game.hasPerms('devlogs');
	}

	get hasPartnerControls() {
		return this.game.referrals_enabled && this.userPartnerKey && this.packages.length;
	}

	get commentsCount() {
		if (this.game) {
			const store = getCommentStore(this.commentManager, 'Game', this.game.id);
			return store ? store.totalCount : 0;
		}
		return 0;
	}

	get shareLink() {
		return getAbsoluteLink(this.$router, this.game.getUrl());
	}

	routeCreated() {
		this.feed = ActivityFeedService.routeInit(this);
	}

	routeResolved($payload: any, fromCache: boolean) {
		Meta.description = $payload.metaDescription;
		Meta.fb = $payload.fb;
		Meta.twitter = $payload.twitter;

		if ($payload.microdata) {
			Meta.microdata = $payload.microdata;
		}

		if (this.game) {
			CommentThreadModal.showFromPermalink(this.$router, this.game, 'comments');
			this.permalinkWatchDeregister = CommentThreadModal.watchForPermalink(
				this.$router,
				this.game,
				'comments'
			);
		}

		this.feed = ActivityFeedService.routed(
			this.feed,
			{
				type: 'EventItem',
				name: 'game-devlog',
				url: `/web/posts/fetch/game/${this.game.id}`,
				hideGameInfo: true,
				itemsPerPage: $payload.perPage,
			},
			$payload.posts,
			fromCache
		);
	}

	destroyed() {
		if (this.permalinkWatchDeregister) {
			this.permalinkWatchDeregister();
			this.permalinkWatchDeregister = undefined;
		}
	}

	copyPartnerLink() {
		if (this.partnerLink) {
			Clipboard.copy(this.partnerLink);
		}
	}

	showComments() {
		CommentModal.show({ model: this.game, displayMode: 'comments' });
	}

	onPostAdded(post: FiresidePost) {
		ActivityFeedService.onPostAdded(this.feed!, post, this);
	}

	async reloadPreviewComments() {
		if (this.game instanceof Game) {
			const $payload = await Api.sendRequest(
				'/web/discover/games/comment-overview/' + this.game.id
			);

			this.setOverviewComments(Comment.populate($payload.comments));
		}
	}

	@Watch('ignoringSplitTest', { immediate: true })
	trackExperiment() {
	}
}
