import { Prop, toNative } from 'vue-facing-decorator';
import { globalState } from '../../app/global-state';
import PowerduckState from '../../app/powerduck-state';
import TsxComponent, { Component } from '../../app/vuetsx';
import { PortalUtils } from '../../common/utils/utils';
import NotificationProvider from '../ui/notification';
import './css/share.css';

interface ShareComponentBindingArgs { }

interface ShareComponentArgs {
	shareUrl: string;
	shareTitle: string;
}

export class ShareHelper {
	static nativeShare(title: string, url: string): void {
		navigator.share({
			title,
			text: '',
			url,
		})
			.then(() => {
				// on success
			})
			.catch((error) => {
				console.error('Error sharing:', error);
			});
	}
}

@Component
class ShareComponentComponent extends TsxComponent<ShareComponentArgs> implements ShareComponentArgs {
	@Prop() shareUrl: string;
	@Prop() shareTitle: string;
	FB_APP_ID: string = '144914712372771';

	private isInAppBrowser(): boolean {
		const ua = (navigator.userAgent || '').toLowerCase();
		return ua.includes('fbav') || ua.includes('fban') || ua.includes('instagram') || ua.includes('twitter');
	}

	private getUrl(): string {
		return this.shareUrl;
	}

	private isMobile(): boolean {
		return PortalUtils.isAndroid() || PortalUtils.isIOS();
	}

	private facebookShare(): void {
		globalState.open(`https://www.facebook.com/sharer/sharer.php?u=${this.getUrl()}`);
	}

	private twitterShare(): void {
		const text = this.shareTitle;
		const url = `https://twitter.com/intent/tweet?url=${this.getUrl()}&text=${encodeURIComponent(text)}`;
		globalState.open(url);
	}

	private facebookMessengerShare(): void {
		if (this.isInAppBrowser()) {
			globalState.alert('ERROR - Unable to open in Facebook browser, open the entry in your system browser and try again');
			return;
		}

		if (this.isMobile()) {
			globalState.open(`fb-messenger://share?link=${encodeURIComponent(this.getUrl())}&app_id=${encodeURIComponent(this.FB_APP_ID)}`, '_system');
		} else {
			globalState.open(`https://www.facebook.com/dialog/send?link=${
				encodeURIComponent(this.getUrl())
			}&app_id=${
				encodeURIComponent(this.FB_APP_ID)
			}&redirect_uri=${
				encodeURIComponent(this.getUrl())}`, '_system');
		}
	}

	private whatsAppShare(): void {
		if (this.isMobile()) {
			globalState.open(`whatsapp://send?text=${encodeURIComponent(this.getUrl())}`);
		} else {
			globalState.open(`https://web.whatsapp.com/send?text=${encodeURIComponent(this.getUrl())}`);
		}
	}

	private redditShare(): void {
		globalState.open(`https://reddit.com/submit?url=${encodeURIComponent(this.getUrl())}&title=${encodeURIComponent(this.shareTitle)}`);
	}

	private pinterestShare(): void {
		globalState.open(`https://pinterest.com/pin/create/button/?url=${encodeURIComponent(this.getUrl())}&description=${encodeURIComponent(this.shareTitle)}`);
	}

	private linkedInShare(): void {
		globalState.open(`https://www.linkedin.com/shareArticle?url=${encodeURIComponent(this.getUrl())}&title=${encodeURIComponent(this.shareTitle)}`);
	}

	private emailShare(): void {
		globalState.location.href = `mailto:?body=${encodeURIComponent(this.shareTitle)}<br><br>${this.getUrl()}`;
	}

	private smsShare(): void {
		globalState.open(`sms:?body=${encodeURIComponent(`${this.shareTitle}, ${this.getUrl()}`)}`);
	}

	private copyToClipboard(): void {
		(navigator.permissions as any).query({ name: 'clipboard-write' }).then((result) => {
			if (result.state == 'granted' || result.state == 'prompt') {
				navigator.clipboard.writeText(this.getUrl()).then(() => {
					NotificationProvider.showSuccessMessage(PowerduckState.getResourceValue('copyToClipboardSuccess'));
				});
			}
		});
	}

	private render(h) {
		if (PortalUtils.hasNativeShare()) {
			return null;
		} else {
			return (
				<div>
					<div class="share-cmp">
						<div onClick={() => this.copyToClipboard()}>
							<div class="share-cmp-icon">
								<i class="far fa-copy"></i>
							</div>
							<div class="share-cmp-content">
								<span>{PowerduckState.getResourceValue('copyToClipboard')}</span>
							</div>
						</div>
					</div>

					<div class="share-cmp">
						<div onClick={() => this.facebookShare()}>
							<div class="share-cmp-icon">
								<i class="fab fa-facebook-f"></i>
							</div>
							<div class="share-cmp-content">
								<span>Facebook</span>
							</div>
						</div>
					</div>

					<div class="share-cmp">
						<div onClick={() => this.facebookMessengerShare()}>
							<div class="share-cmp-icon">
								<i class="fab fa-facebook-messenger"></i>
							</div>
							<div class="share-cmp-content">
								<span>Facebook Messenger</span>
							</div>
						</div>
					</div>

					<div class="share-cmp">
						<div onClick={() => this.whatsAppShare()}>
							<div class="share-cmp-icon">
								<i class="fab fa-whatsapp"></i>
							</div>
							<div class="share-cmp-content">
								<span>WhatsApp</span>
							</div>
						</div>
					</div>

					<div class="share-cmp">
						<div onClick={() => this.twitterShare()}>
							<div class="share-cmp-icon">
								<i class="fab fa-twitter"></i>
							</div>
							<div class="share-cmp-content">
								<span>Twitter</span>
							</div>
						</div>
					</div>

					<div class="share-cmp">
						<div onClick={() => this.redditShare()}>
							<div class="share-cmp-icon">
								<i class="fab fa-reddit-square"></i>
							</div>
							<div class="share-cmp-content">
								<span>Reddit</span>
							</div>
						</div>
					</div>

					<div class="share-cmp">
						<div onClick={() => this.pinterestShare()}>
							<div class="share-cmp-icon">
								<i class="fab fa-pinterest-square"></i>
							</div>
							<div class="share-cmp-content">
								<span>Pinterest</span>
							</div>
						</div>
					</div>

					<div class="share-cmp">
						<div onClick={() => this.linkedInShare()}>
							<div class="share-cmp-icon">
								<i class="fab fa-linkedin"></i>
							</div>
							<div class="share-cmp-content">
								<span>LinkedIn</span>
							</div>
						</div>
					</div>

					<div class="share-cmp">
						<div onClick={() => this.emailShare()}>
							<div class="share-cmp-icon">
								<i class="fas fa-at"></i>
							</div>
							<div class="share-cmp-content" data-bind="emailTo">
								<span>Email</span>
							</div>
						</div>
					</div>

					{this.isMobile() && (
						<div class="share-cmp" onClick={() => this.smsShare()}>
							<div class="share-cmp-icon">
								<i class="far fa-comment"></i>
							</div>
							<div class="share-cmp-content">
								<span>SMS</span>
							</div>
						</div>
					)}
				</div>
			);
		}
	}
}

const ShareComponent = toNative(ShareComponentComponent);
export default ShareComponent;