import { forwardRef } from '@wordpress/element';
import clsx from '../../../utils/clsx';
import {
	gapStyle,
	marginStyle,
	marginTopStyle,
	paddingStyle,
	paddingTopStyle,
} from '../../../utils/styles';
import Status from '../../atoms/Status/Status';

const Card = forwardRef(
	(
		{
			id,
			style,
			className = '',
			margin,
			marginTop,
			padding = 20,
			paddingTop,
			background = 'primary-light',
			border = 'secondary',
			borderStyle = 'solid',
			rounded = 'lg',
			widthFull = true,
			heightFull = false,
			disabled,
			flex = false,
			align,
			blockAlign,
			direction,
			gap,
			wrap,
			statusProps,
			children,
			onClick,
			onContextMenu,
			onMouseEnter,
			onMouseLeave,
			...rest
		},
		ref
	) => {
		const styles = {
			...style,
			...marginStyle( margin ),
			...marginTopStyle( marginTop ),
			...paddingStyle( padding ),
			...paddingTopStyle( paddingTop ),
			...gapStyle( gap ),
		};

		const classes = clsx(
			`bg-${ background }`,
			'border',
			`border-${ border }`,
			`border-${ borderStyle }`,
			`rounded-${ rounded }`,
			'bg-transition',
			widthFull && 'w-full',
			heightFull && 'h-full',
			disabled && 'disabled',
			flex && 'flex',
			flex && align && `justify-${ align }`,
			flex && blockAlign && `items-${ blockAlign }`,
			flex &&
				( direction === 'row'
					? 'flex-row'
					: direction === 'row-reverse'
					? 'flex-row-reverse'
					: direction === 'col'
					? 'flex-col'
					: direction === 'col-reverse'
					? 'flex-col-reverse'
					: 'flex-row' ),
			flex && ( wrap ? 'flex-wrap' : 'flex-nowrap' ),
			className
		);

		return (
			<Status { ...statusProps }>
				<div
					ref={ ref }
					id={ id }
					style={ styles }
					className={ classes }
					onClick={ ( e ) => onClick && ! disabled && onClick( e ) }
					onContextMenu={ ( e ) =>
						onContextMenu && ! disabled && onContextMenu( e )
					}
					onMouseEnter={ ( e ) => onMouseEnter?.( e ) }
					onMouseLeave={ ( e ) => onMouseLeave?.( e ) }
					{ ...rest }
				>
					{ children }
				</div>
			</Status>
		);
	}
);

export default Card;
