import { React, PropTypes, classnames } from '@gravityforms/libraries';

const { forwardRef } = React;

/**
 * @module GridLoader
 *
 * @description A component used to display a loader for a grid cell.
 *
 * @since 4.1.2
 *
 * @param {object}      props                  The component props.
 * @param {boolean}     props.animating        Whether the loader is animating or not.
 * @param {object}      props.customAttributes The attributes for the loader element.
 * @param {Array}       props.customClasses    The CSS classes for the loader element.
 * @param {boolean}     props.variableWidth    Whether the loader should have a variable width or not.
 * @param {object|null} ref                    The ref object for this component.
 *
 * @return {JSX.Element} The GridLoader component.
 */
const GridLoader = forwardRef( ( {
	animating = true,
	customAttributes = {},
	customClasses = [],
	variableWidth = false,
}, ref ) => {
	const width = variableWidth ? `${ Math.floor( 50 + ( Math.random() * 50 ) ) }%` : '100%';
	const componentProps = {
		className: classnames( {
			'gform-data-grid__loader': true,
			'gform-data-grid__loader--animating': animating,
		}, customClasses ),
		style: { width },
		ref,
		...customAttributes,
	};

	return (
		<div { ...componentProps } />
	);
} );

GridLoader.propTypes = {
	animating: PropTypes.bool,
	customAttributes: PropTypes.object,
	customClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
	] ),
	width: PropTypes.string,
};

export default GridLoader;
