type Config = Record<string, any>;

interface Mixin {

	/**
	 * Configures and starts the mixin.
	 * 
	 * @param streamName
	 * @param streamID
	 * @param [config]
	 */
	start: (
		streamName: string,
		streamID: string,
		config?: Config
	) => void;

	/**
	 * Stops the mixin.
	 * 
	 * @param streamName
	 * @param streamID
	 */
	stop: ( streamName: string, schemaID: string ) => void;
}

interface Instrument {

	/**
	 * Includes the mixin to this instrument.
	 * 
	 * The mixin is configured and started immediately.
	 *
	 * @param mixin
	 * @param [config]
	 */
	include: ( mixin: Mixin, config?: Config ) => self;
}

const {
	SessionLength,
	PageviewLength,
	NavigationTiming /*, etc. */
} = require( 'ext.metricsPlatform.mixins' );

const i =
	  mw.eventLog.newInstrument( STREAM_NAME, STREAM_ID )
		  .include(
			  SessionLength,
			  PageviewLength,
			  NavigationTiming
		  );

const { SessionLength } = require( 'ext.metricsPlatform.mixins' );

SessionLength.start( STREAM_NAME, STREAM_ID );

const STREAM_NAME = 'TODO';
const SCHEMA_ID = '/analytics/product_metrics/web/base/1.2.0';

// State
// =====

/**
 * @typedef {Object} StateEntry
 * @property {string} selector
 * @property {string} friendlyName
 * @property {Element} element
 * @property {number} elementClickCount
 * @property {string} funnelEntryToken
 */

/** @type {Map<HTMLElement,StateEntry>} */
const state = new WeakMap();

// Event Listeners
// ===============

const intersectionObserver = new IntersectionObserver(
	( entries, observer ) => {
		entries.forEach( ( { target } ) => {
			if ( !state.has( target ) ) {
				// TODO

				return;
			}

			const {
				funnelEntryToken,
				elementFriendlyName
			} = state.get( target );

			mw.eventLog.submitInteraction(
				STREAM_NAME,
				SCHEMA_ID,
				'impression',
				{
					action_source: 'ClickThroughRateInstrument',
					funnel_entry_token: funnelEntryToken,
					funnel_event_sequence_position: 1,
					element_friendly_name: elementFriendlyName
				}
			);

			observer.unobserve( target );
		} );
	},
	{
		threshold: 1
	}
);

document.addEventListener( 'click', ( { target } ) => {
	if ( state.has( target ) ) {
		const entry = state.get( target );

		++entry.elementClickCount;

		mw.eventLog.submitInteraction(
			STREAM_NAME,
			SCHEMA_ID,
			'click',
			{
				action_source: 'ClickThroughRateInstrument',
				funnel_entry_token: entry.funnelEntryToken,
				funnel_event_sequence_position: 2 + entry.elementClickCount,
				element_friendly_name: entry.friendlyName
			}
		);
	}
} );

// API
// ===

/**
 * An instrument that tracks impressions and clicks of a DOM element.
 *
 * ## Usage
 *
 * const { ClickThroughRateInstrument } = require( 'ext.wikimediaEvents.metricsPlatform' );
 *
 * const result = ClickThroughRateInstrument.start(
 *     '[data-pinnable-element-id="vector-main-menu"] .vector-pinnable-header-unpin-button',
 *     'pinnable-header.vector-main-menu.unpin'
 * );
 *
 * // A few moments later…
 *
 * ClickThroughRateInstrument.stop( result );
 * 
 *
 * ## Events
 *
 * ### Impression
 *
 * The `action=impression` event is submitted soon after the element is fully visible in the
 * viewport. The event is submitted once. The event has the following fields:
 *
 * | Field                          | Type      | Value(s)                       |
 * | ------------------------------ | --------- | ------------------------------ |
 * | action                         | string    | `"impression"`                 |
 * | action_source                  | string    | `"ClickThroughRateInstrument"` |
 * | funnel_entry_token             | Token     |                                |
 * | funnel_event_sequence_position | usmallint | `1`                            |
 * | element_friendly_name          | string    |                                |
 *
 * ### Click
 *
 * The `action=click` event is submitted when the user clicks the element. The event can be
 * submitted more than once. The event has the following fields:
 *
 * | Field                          | Type      | Value(s)                       |
 * | ------------------------------ | --------- | ------------------------------ |
 * | action                         | string    | `"click"`                      |
 * | action_source                  | string    | `"ClickThroughRateInstrument"` |
 * | funnel_entry_token             | Token     |                                |
 * | funnel_event_sequence_position | usmallint | `2`, `3`, `4`, etc.            |
 * | element_friendly_name          | string    |                                |
 *
 * ## Notes
 *
 * 1. The `action=click` event is submitted when the user clicks the element. The instrument
 *    detects this by listening to the [Element: click event][0], which occurs when:
 *
 *    > * a pointing-device button (such as a mouse's primary button) is both pressed and released
 *    >   while the pointer is located inside the element.
 *    > * a touch gesture is performed on the element
 *    > * the `Space` key or `Enter` key is pressed while the element is focused
 *
 * [0]: https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event
 *
 * @class ClickThroughRateInstrument
 * @singleton
 */
const ClickThroughRate = {

	/**
	 * @param {string} selector
	 * @param {string} friendlyName
	 * @return {StateEntry|null}
	 */
	start( selector, friendlyName ) {
		const e = document.querySelector( selector );

		if ( !e ) {
			// TODO

			return null;
		}

		if ( state.has( e ) ) {
			// TODO

			return null;
		}

		const result = {
			selector,
			friendlyName,
			element: e,
			elementClickCount: 0,
			funnelEntryToken: mw.user.generateRandomSessionId()
		};

		state.set( e, result );
		intersectionObserver.observe( e );

		// Return a copy of the internal state so that it can't be modified by third-parties but
		// can still be used to stop the instrument tracking the element (see
		// ClickThroughRateInstrument#stop() below).
		return Object.assign( {}, result );
	},

	stop( { element } ) {
		intersectionObserver.unobserve( element );
		state.delete( element );
	}
};

module.exports = ClickThroughRate;