const previewType = 'math';
const selector = '.mwe-math-element[data-qid] img';
const api = new mw.Rest();
const fetch = function ( qid ) {
	return api.get( '/math/v0/popup/html/' + qid, {}, {
		Accept: 'application/json; charset=utf-8',
		'Accept-Language': mw.config.language
	} );
};
const getQidStr = function ( parent ) {
	if ( parent.getAttribute( 'href' ) ) {
		const href = parent.getAttribute( 'href' );
		const match = href.match( /qid=(Q\d+)/ );
		if ( match ) {
			return match[ 1 ];
		}
	}
	return null;
};
const fetchPreviewForTitle = function ( title, el ) {
	const deferred = $.Deferred();
	const parent = el.closest( '.mwe-math-element' );
	let qidstr = getQidStr( parent );
	if ( parent.dataset.qid ) {
		qidstr = parent.dataset.qid;
	}
	if ( !qidstr || ( qidstr.match( /Q\d+/g ) === null ) ) {
		return deferred.reject();
	}
	qidstr = qidstr.slice( 1 );
	fetch( qidstr ).then( ( body ) => {
		const model = {
			title: body.title,
			url: body.canonicalurl,
			languageCode: body.pagelanguagehtmlcode,
			languageDirection: body.pagelanguagedir,
			extract: body.extract,
			type: previewType,
			thumbnail: undefined,
			pageId: body.pageId
		};
		deferred.resolve( model );
	} );
	return deferred.promise();
};
// popups require offsetHeight and offsetWidth attributes
[].forEach.call(
	document.querySelectorAll( selector ),
	( node ) => {
		// temporary hack to enable popup T380079
		node.href = node.baseURI;
		if ( typeof node.offsetWidth === 'undefined' ) {
			node.offsetWidth = node.getBoundingClientRect().width || 1;
		}
		if ( typeof node.offsetHeight === 'undefined' ) {
			node.offsetHeight = node.getBoundingClientRect().height || 1;
		}
	}
);

const mathDisabledByUser = mw.user.isNamed() && mw.user.options.get( 'math-popups' ) !== '1';
const mathAppliesToThisPage = document.querySelectorAll( selector ).length > 0;

module.exports = !mathAppliesToThisPage || mathDisabledByUser ? null : {
	type: previewType,
	selector,
	gateway: {
		fetch,
		fetchPreviewForTitle
	}
};
