import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';

 

 
/*const columns = [
  { field: 'id', headerName: 'ID', width: 90},
  {
    field: 'firstName',
    headerName: 'First name',
    width: 150,
    editable: false,
  },
  {
    field: 'lastName',
    headerName: 'Last name',
    width: 150,
    editable: true,
  },
  {
    field: 'age',
    headerName: 'Age',
    type: 'number',
    width: 110,
    editable: true,
  },
  {
    field: 'fullName',
    headerName: 'Full name',
    description: 'This column has a value getter and is not sortable.',
    sortable: false,
    width: 160,
    valueGetter: (params) =>
      `${params.row.firstName || ''} ${params.row.lastName || ''}`,
  },
];

const rows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
  { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
];*/

const columns = [
  { field: 'id', 
  headerName: 'ID', 
  width: 50, 
  sortable: false},
  { 
    field: 'fromMe',
    headerName: 'user/client',
    type: 'bool',
    width: 100,  
    flex: 1, 
    editable: false,
    sortable: false
  },
  { 
    field: 'body',
    headerName: 'message',
    type: 'string',
    //width: 150,
    flex: 1, 
    editable: false,
    sortable: false

  },
  
 /* {
    field: 'mediaType',
    headerName: 'media type', 
    //width: 110,
    flex: 1,
    editable: false,
  }, 
  {
    field: 'mediaUrl',
    headerName: 'media url', 
    type: 'string',
    //width: 110,
    flex: 1,
    editable: false,
  }, 
  {
    field: 'read',
    headerName: 'tead',
    type: 'bool',
    //width: 110,
    flex: 1,
    editable: false,
  },*/
  {
    field: 'createdAt',
    headerName: 'created at',
    type: 'dateTime', 
    //width: 110,
    flex: 1,
    editable: false, 
    sortable: false
  }
  
];
 

const DataGridTable = (props) => {
  
  return (
    <div style={{ height: 400, width: '600' }}>
      <DataGrid
      
      onCellDoubleClick = {(params, event) => { 
          
          alert(params.value) 
            
          if (!event.ctrlKey) {
            event.defaultMuiPrevented = true;
          }
      }}


      onCellKeyDown = {(params, event) => { 

        if(event.key.toString().toLowerCase() === 'enter'){
          alert(params.value)
        } 
        
      }}
       

        rows={props.data}
        columns={columns}
        pageSize={25}
        rowsPerPageOptions={[25]}   
        rowHeight={38} 
        //checkboxSelection
        disableSelectionOnClick  
      />
    </div>
  );
}

export default DataGridTable