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

const colsCount = 3

const headerCellStyle = {
  border:'1px solid lightgrey'
}

const valueCellStyle = {
  border:'1px solid lightgrey',
  justifyContent:'right',
  marginRight:'16px',
  fontWeight:'bold',
  textAlign:'right',
  padding: 0
}

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

  return (
    <Grid>
      {columns.map((column, i) => (
        <>
          <GridItem
            key={column.dataIndex}
            row={Math.floor(i / colsCount) + 1}
            col={(i % colsCount) * 2 + 1}
            style={headerCellStyle}
          >
            {column.title}
          </GridItem>

          <GridItem
            key={column.title}
            row={Math.floor(i / colsCount) + 1}
            col={(i % colsCount) * 2 + 2}
            style={valueCellStyle}
          >
            {column.render ? (
              <Form.Item
                key={column.dataIndex}
                name={column.dataIndex}
                style={{ margin: 0 }}
                //rules={column.formItemRules}
              >
                {column.render(item[column.dataIndex])}
              </Form.Item>
            ) : (
              <p key={column.title} className='m-5px'>{item[column.dataIndex]}</p>
            )}
          </GridItem>
        </>
      ))}
    </Grid>
  )
})