const { __ } = wp.i18n

document.addEventListener( 'DOMContentLoaded', function () {

	function addAttribute( selector, att, val ){
		let e = document.querySelectorAll( selector );
		for ( let i=0; i < e.length; i++ ) {
			e[ i ].setAttribute( att, val );
		}
	}

	// Add aria-label attribute to color picker slider
	// https://github.com/Automattic/Iris/issues/69
	addAttribute( 'div.iris-slider.iris-strip', 'aria-label', __( 'Gradient selector', 'pressbooks' ) );
	addAttribute( '.ui-slider-handle', 'aria-label', __( 'Gradient selector', 'pressbooks' ) );

	// Add aria-label attributes to color picker palette boxes
	// https://github.com/Automattic/Iris/issues/69
	 ( function (){
		let colors = document.querySelectorAll( 'a.iris-palette' );

		for ( let i=0; i < colors.length; i++ ) {
			let irisPalette = colors[ i ];
			let rgb = colors[ i ].style.backgroundColor;
			let color = '';

			if ( rgb === 'rgb(0, 0, 0)' ){
				color = __( 'Black', 'pressbooks' )
			}
			if ( rgb === 'rgb(255, 255, 255)' ){
				color = __( 'White', 'pressbooks' )
			}
			if ( rgb === 'rgb(221, 51, 51)' ){
				color = __( 'Red', 'pressbooks' )
			}
			if ( rgb === 'rgb(221, 153, 51)' ){
				color = __( 'Orange', 'pressbooks' )
			}
			if ( rgb === 'rgb(238, 238, 34)' ){
				color = __( 'Yellow', 'pressbooks' )
			}
			if ( rgb === 'rgb(129, 215, 66)' ){
				color = __( 'Green', 'pressbooks' )
			}
			if ( rgb === 'rgb(30, 115, 190)' ){
				color = __( 'Blue', 'pressbooks' )
			}
			if ( rgb === 'rgb(130, 36, 227)' ){
				color = __( 'Purple', 'pressbooks' )
			}

			irisPalette.setAttribute( 'aria-label', __( 'Select ' + color, 'pressbooks' ) );
		}
	} )();
} );