import { Empty } from 'antd';
import {Grid, GridItem} from '../../components/Grid'

export const View = ({columns, item}) => {
  if (!item || !columns?.length)
    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>

  const colsCount = 3
  const viewItems = columns.map( (column, i) => {
    const row = Math.floor(i / colsCount) + 1
    const colb = i % colsCount

    return <>
        <GridItem 
          row={row} 
          col={colb*2 + 1}
          style={{background:'#00000005', 
                  //width: '300px',
                  border:'1px solid black'
                }}
        >
          {column.title}
        </GridItem>
        <GridItem 
          row={row} 
          col={colb*2 + 2}
          style={{background:'#00000005',
                  //width: '150px',
                  border:'1px solid black', 
                  justifyContent:'right', 
                  marginRight:'16px', 
                  fontWeight:'bold', 
                  textAlign:'right'}}
        >
            {column.render ? column.render(item[column.dataIndex]) : item[column.dataIndex]}        
        </GridItem>
    </>
  })

  return <>
    <Grid>
      {viewItems}
    </Grid>
  </>
}