import React, { useEffect, useState } from 'react'
import { Modal } from 'antd'
import { Table } from '../../components/Table'
import { formatDate } from './MeasureTable'
import { v } from './columnsCommon'

export const InclinometryTable = React.memo(({ group, visible, onClose }) => {
    const [tableColumns, setTableColumns] = useState([])
    const [tableData, setTableData] = useState([])

    useEffect(() => {
        setTableColumns([{
            title: 'Дата',
            key: 'date',
            dataIndex: 'date',
            render: (item) => formatDate(item),
            fixed: 'left',
            width: '8rem',
          },
          ...(group?.columns?.map((column) => ({...column, title: v(column.title)})) ?? [])
        ])
    }, [group?.columns])

    useEffect(() => {
        setTableData(group?.values?.map(row => ({ date: row.timestamp, ...row.data })))
    }, [group?.values])

    return !group?.columns ? null : (
        <Modal
            title={group?.title}
            centered
            visible={visible}
            onCancel={onClose}
            width={1900}
            footer={null}
        >
            <Table
                dataSource={tableData}
                columns={tableColumns}
                scroll={{
                    y: 400,
                    x: 1300
                }}
                bordered
            />
        </Modal>
    )
})

export default InclinometryTable