/**
 * External dependencies
 */
import { withDispatch, withSelect } from '@wordpress/data';
import { compose } from '@wordpress/compose';
import { Notice, Button } from '@wordpress/components';

/**
 * Internal dependencies
 */
import { default as commands } from './commands';
import { STORE_KEY } from './data/constants';
import './data';

function Tools( { actions, currentlyRunningCommands, messages } ) {
	actions = actions();
	return (
		<div id="wc-admin-test-helper-tools">
			<h2>Tools</h2>
			<p>This section contains miscellaneous tools.</p>
			{ Object.keys( messages ).map( ( key ) => {
				return (
					<Notice
						status={ messages[ key ].status }
						key={ key }
						isDismissible={ false }
					>
						{ key }: { messages[ key ].message }
					</Notice>
				);
			} ) }
			<table className="tools wp-list-table striped table-view-list widefat">
				<thead>
					<tr>
						<th>Command</th>
						<th>Description</th>
						<th>Run</th>
					</tr>
				</thead>
				<tbody>
					{ commands.map( ( command, index ) => {
						return (
							<tr key={ index }>
								<td className="command">{ command.command }</td>
								<td>{ command.description }</td>
								<td>
									<Button
										onClick={ actions[ command.action ] }
										disabled={
											currentlyRunningCommands[
												command.command
											]
										}
										isPrimary
									>
										Run
									</Button>
								</td>
							</tr>
						);
					} ) }
				</tbody>
			</table>
		</div>
	);
}

export default compose(
	withSelect( ( select ) => {
		const { getCurrentlyRunning, getMessages } = select( STORE_KEY );
		return {
			currentlyRunningCommands: getCurrentlyRunning(),
			messages: getMessages(),
		};
	} ),
	withDispatch( ( dispatch ) => {
		const actions = function () {
			return dispatch( STORE_KEY );
		};

		return {
			actions,
		};
	} )
)( Tools );