/**
 * Internal dependencies
 */
import './editor.scss';
import { getBlockClassName } from './utils.js';

export default ( { attributes } ) => {
	const {
		categoryIds,
		imageType,
		orderby,
		productId,
		reviewsOnPageLoad,
		reviewsOnLoadMore,
		showLoadMore,
		showOrderby,
	} = attributes;

	const data = {
		'data-image-type': imageType,
		'data-orderby': orderby,
		'data-reviews-on-page-load': reviewsOnPageLoad,
		'data-reviews-on-load-more': reviewsOnLoadMore,
		'data-show-load-more': showLoadMore,
		'data-show-orderby': showOrderby,
	};
	let className = 'wc-block-all-reviews';

	if ( productId ) {
		data[ 'data-product-id' ] = productId;
		className = 'wc-block-reviews-by-product';
	}

	if ( Array.isArray( categoryIds ) ) {
		data[ 'data-category-ids' ] = categoryIds.join( ',' );
		className = 'wc-block-reviews-by-category';
	}

	return (
		<div
			className={ getBlockClassName( className, attributes ) }
			{ ...data }
		/>
	);
};