import { Empty, Form } from 'antd';
import {Grid, GridItem} from '../../components/Grid'
import '../../styles/index.css'

const renderSwitchableColumn = (column, itm) => {
  if(column.render) {
    return ( 
      <Form.Item
        key={column.dataIndex}
        name={column.dataIndex}
        style={{margin: 0}}
        rules={column.formItemRules}
      >
        {column.render(itm[column.dataIndex])}    
      </Form.Item>
    )
  }

  return <p key={column.title} className='m-5px'>{itm[column.dataIndex]}</p>
}

export const View = ({columns, item}) => {
  if (!item || !columns?.length)
    return <Empty key='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 
        key={column.dataIndex}
        row={row} 
        col={colb*2 + 1}
        style={{border:'1px solid lightgrey'}}
      >
        {column.title}
      </GridItem>

      <GridItem 
        key={column.title}
        row={row} 
        col={colb*2 + 2}
        style={{border:'1px solid lightgrey', 
                justifyContent:'right', 
                marginRight:'16px', 
                fontWeight:'bold', 
                textAlign:'right',
                padding: 0}}
      >
        {renderSwitchableColumn(column, item)}
      </GridItem>
    </>
  })

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