/* global mraAdmin */
( function ( $ ) {
	'use strict';

	var $overlay, $modalTitle, $modalBody;

	function openModal( attachmentId ) {
		$modalTitle.text( mraAdmin.i18n.detailsTitle );
		$modalBody.html( '<p>' + mraAdmin.i18n.loading + '</p>' );
		$overlay.addClass( 'is-open' );

		$.ajax( {
			url: mraAdmin.ajaxUrl,
			type: 'POST',
			data: {
				action: 'mra_usage_details',
				attachment_id: attachmentId,
				nonce: mraAdmin.nonce
			},
			success: function ( response ) {
				if ( response.success ) {
					$modalTitle.text( response.data.title );
					$modalBody.html( response.data.html );
				} else {
					$modalBody.html( '<p>' + mraAdmin.i18n.errorLoading + '</p>' );
				}
			},
			error: function () {
				$modalBody.html( '<p>' + mraAdmin.i18n.errorLoading + '</p>' );
			}
		} );
	}

	function closeModal() {
		$overlay.removeClass( 'is-open' );
		$modalBody.html( '' );
	}

	$( function () {
		$overlay    = $( '#mra-modal-overlay' );
		$modalTitle = $overlay.find( '.mra-modal-title' );
		$modalBody  = $overlay.find( '.mra-modal-body' );

		// Close on × button.
		$overlay.on( 'click', '.mra-modal-close', closeModal );

		// Close when clicking the dark backdrop (not the box itself).
		$overlay.on( 'click', function ( e ) {
			if ( $( e.target ).is( $overlay ) ) {
				closeModal();
			}
		} );

		// Close on Escape key.
		$( document ).on( 'keydown', function ( e ) {
			if ( 27 === e.which && $overlay.hasClass( 'is-open' ) ) {
				closeModal();
			}
		} );

		// "View Details" links (row action or "N more" link in usages column).
		$( document ).on( 'click', '.mra-view-details', function ( e ) {
			e.preventDefault();
			openModal( $( this ).data( 'id' ) );
		} );
	} );
} ( jQuery ) );