import { Component } from 'react'
import { DataGrid } from '@mui/x-data-grid'
import { Link, Typography, Box } from '@mui/material'
import Moment from 'react-moment'

export default class Table extends Component {
  constructor ({ scanResults }) {
    super()
    this.scanResults = scanResults.map(row => ({
      ...row,
      id: row._id
    }))
    this.columns = [
      {
        field: 'name',
        headerName: 'Name',
        flex: 2,
        renderCell: (cellValues) => {
          return (
            <Box
              component='span'
              sx={{
                display: 'block'
              }}
            >
              <Link
                target='_blank'
                href={cellValues.row.url}
                rel='noreferrer'
              >
                {cellValues.row.fullName}
              </Link>
              <Typography variant='caption' display='block'>
                <Moment
                  format='DD.MM HH:mm'
                >
                  {cellValues.row.updatedAt}
                </Moment>
              </Typography>
            </Box>
          )
        }
      },
      {
        field: 'partsPrice',
        headerName: 'Parts Price',
        flex: 1
      },
      {
        field: 'setPrice',
        headerName: 'Set Price',
        flex: 1
      },
      {
        field: 'difference',
        headerName: 'Difference',
        flex: 1
      }
    ]
  }

  static getInitialProps () {
    return {
      props: { scanResults: [] }
    }
  }

  render () {
    return (
      <Box
        sx={{
          height: '90vh',
          width: '100%'
        }}
      >
        <DataGrid
          rows={this.scanResults}
          columns={this.columns}
          autoPageSize
          initialState={{
            sorting: {
              sortModel: [{ field: 'difference', sort: 'desc' }]
            }
          }}
          sx={{
            borderLeft: 'none',
            borderRight: 'none'
          }}
        />
      </Box>
    )
  }
}