import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop } from 'vue-property-decorator';
import { propOptional, propRequired } from '../../../../../utils/vue';
import {
	FiresidePostEmbed,
} from '../../../../../_common/fireside/post/embed/embed.model';
import { Navigate } from '../../../../../_common/navigate/navigate.service';
import { AppResponsiveDimensions } from '../../../../../_common/responsive-dimensions/responsive-dimensions';
import { Screen } from '../../../../../_common/screen/screen-service';
import { ScrollInviewConfig } from '../../../../../_common/scroll/inview/config';
import { AppScrollInview } from '../../../../../_common/scroll/inview/inview';
import { AppTooltip } from '../../../../../_common/tooltip/tooltip-directive';
import AppVideoEmbed from '../../../../../_common/video/embed/embed.vue';

const InviewConfig = new ScrollInviewConfig({ margin: `${Screen.windowHeight * 0.5}px` });

@Component({
	components: {
		AppVideoEmbed,
		AppScrollInview,
		AppResponsiveDimensions,
	},
	directives: {
		AppTooltip,
	},
})
export default class AppFiresidePostEmbed extends Vue {
	@Prop(propRequired(FiresidePostEmbed)) embed!: FiresidePostEmbed;
	@Prop(propOptional(Boolean, true)) hideOutview!: boolean;

	readonly InviewConfig = InviewConfig;

	isOpen = false;
	shouldAutoplay = true;
	isInview = true;

	get shouldShow() {
		return false;
	}

	get thumbUrl() {
		if (this.embed.metadata && this.embed.metadata.image_media_item) {
			return this.embed.metadata.image_media_item.mediaserver_url;
		}

		return undefined;
	}

	get title() {
		if (this.embed.metadata && this.embed.metadata.title) {
			return this.embed.metadata.title;
		}
	}

	get website() {
		if (this.embed.metadata && this.embed.metadata.site_url) {
			// Node SSR doesn't support the URL api.
			if (GJ_IS_SSR) {
				return this.embed.metadata.site_url;
			}

			const url = new URL(this.embed.metadata.site_url);
			let website = url.hostname;
			if (
				this.embed.metadata.site_name &&
				this.embed.metadata.site_name !== this.embed.metadata.url
			) {
				website = this.embed.metadata.site_name + ' | ' + website;
			}
			return website;
		}

	}

	get description() {
		if (this.embed.metadata) {
			if (this.embed.metadata.description) {
				return this.embed.metadata.description.replace('\n', ' ');
			}

			if (this.embed.metadata.site_name) {
				return this.embed.metadata.site_name;
			}

			return this.embed.metadata.site_url;
		}

		return this.embed.url;
	}

	get shouldShowEmbedContent() {
		return this.isInview || !this.hideOutview;
	}

	get imageAlt() {
		if (this.embed.metadata && this.embed.metadata.image_alt) {
			return this.embed.metadata.image_alt;
		}
	}

	get playIcon() {
		return 'blog-article';
	}

	onClick() {
		if (this.embed.is_processing) {
			return;
		}

		if (!this.isOpen) {
			this.isOpen = true;
		} else {
			Navigate.newWindow(this.embed.url);
		}
	}

	onInviewChanged(isInview: boolean) {
		this.isInview = isInview;

		// Disable autoplay when it was already opened
		if (!isInview && this.isOpen) {
			this.shouldAutoplay = false;
		}
	}
}
