import * as React from 'react'
import cx from 'classnames'

import {
	Icon,
} from '@wordpress/components'

import {
	Button,
} from '@ska/components'

import './style.scss'

export interface ButtonGridButtonProps {
	key?: string
	label: string
	icon: React.JSX.Element
	iconProps?: any
	onClick?: () => void
	disabled?: boolean
	as?: React.FC
}

export interface ButtonGridProps {
	/** How many columns of buttons. */
	columns?: number
	/** Width of a button in the grid. */
	width?: number
	buttons: ButtonGridButtonProps[]
	className?: string
	style?: any
}

const ButtonGrid: React.FC<ButtonGridProps> = ({
	columns = 2,
	width = 16,
	buttons = [],
	className,
	style,
	...props
}) => {

	return (
		<div
			className={cx('ska-button-grid', className)}
			style={{
				gridTemplateColumns: `repeat(${columns}, 1fr)`,
				width: (width * columns) + 2,
				...style,
			}}
			{...props}
		>
			{buttons.map((buttonProps, index) => {

				const {
					key = index,
					icon,
					iconProps = {},
					as: ButtonComponent = Button,
					...props
				} = buttonProps

				return (
					<ButtonComponent
						key={key}
						children={<Icon icon={icon} size={width} {...iconProps} />}
						{...props}
					/>
				)
			})}
		</div>
	)
}

export default ButtonGrid