import { Component } from 'react'
import { DataGrid } from '@mui/x-data-grid'
import { Link } from '@mui/material'

export default class Table extends Component {
  constructor ({ scanResults }) {
    super()
    this.scanResults = scanResults.map(row => ({
      ...row,
      id: row._id,
      difference: row.setPrice - row.partsPrice
    }))
    this.columns = [
      {
        field: 'name',
        headerName: 'Name',
        flex: 1,
        renderCell: (cellValues) => {
          return <Link href={`#${cellValues.row.url}`}>{cellValues.row.name}</Link>
        }
      },
      {
        field: 'partsPrice',
        headerName: 'Parts Price',
        flex: 1
      },
      {
        field: 'setPrice',
        headerName: 'Set Price',
        flex: 1
      },
      {
        field: 'difference',
        headerName: 'Difference',
        flex: 1
      }
    ]
  }

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