import { memo, Fragment } from 'react'
import { Empty, Form } from 'antd'

import { Grid, GridItem } from '@components/Grid'

import '@styles/index.css'
import '@styles/measure.css'

const colsCount = 3

export const View = memo(({ columns, item }) => !item || !columns?.length ? (
  <Empty key={'empty'} image={Empty.PRESENTED_IMAGE_SIMPLE} />
) : (
  <Grid>
    {columns.map((column, i) => (
      <Fragment key={i}>
        <GridItem
          key={column.dataIndex}
          row={Math.floor(i / colsCount) + 1}
          col={(i % colsCount) * 2 + 1}
          className={'measure-column-header'}
        >
          {column.title}
        </GridItem>

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