import React, { useRef } from 'react'

const aligments = {
  start: 'flex-start',
  center: 'center',
  end: 'flex-end'
}

interface Props {
  width: string
  height: string
  containerData: any
  verticalGap: number
  horizontalGap: number
  children?: any
  style: any
}



export const Item = ({ width, height, containerData, verticalGap, horizontalGap, children, style }: Props) => {
  const itemRef = useRef(null)

  let topPosition = '0';
  if (containerData.ic_rowIndex !== 0) {
    topPosition = verticalGap ? `${verticalGap * containerData.ic_rowIndex}%` : '0';
  }

  let leftPadding = '0'
  if (containerData.ic_columnIndex !== 0) {
    leftPadding = horizontalGap ? `${horizontalGap}%` : '0';
  }

  return (
    <div ref={itemRef}
      style={{
        overflow: 'hidden',
        display: 'flex',
        position: 'relative',
        alignItems: aligments['center'],
        justifyContent: aligments['center'],
        width: width,
        height: height,
        top: topPosition,
        paddingLeft: leftPadding,
        ...style
      }}
    >
      {React.cloneElement(children, containerData)}
    </div>
  )
}
