import { useState, useEffect} from 'react';
import MaterialTable from 'material-table';  
import Modal from '../Modal' 
import { render } from '@testing-library/react';

import React from 'react';  
import { fontSize } from '@mui/system';
import { FastField } from 'formik';
  


let child_columns = [
  { title: 'Atendente', field: 'user.name' }
];
 
const MTable = (props) => { 
  
  const [selectedRow, setSelectedRow] = useState(null);  
   
  console.log('rederizou....................')
 
  useEffect(() => {
   
    console.log(`You have clicked the button ${selectedRow} times`) 
   
  },[selectedRow]);

  return ( <div style={{ maxWidth: "100%", fontSize:10}}>
          
             <MaterialTable
                title='Relatorio'    
                columns={props.columns} 
                data={props.data} 

                onRowClick={(evt, selectedRow) => { 

                  console.log(selectedRow.tableData.id);
                  console.log(selectedRow);  
                  console.log(selectedRow.messages); 
                  setSelectedRow(selectedRow.tableData.id)  
                
                 render(<Modal data={selectedRow.messages}/>)  

                  //evt.stopPropagation() 
                  }
                }  
                
                options={{
                  search: true,
                  selection: false,
                  paging: false,  
                  searchFieldStyle: {
                    width: 300,
                  },  
                  
                  rowStyle: rowData => ({
                    fontSize: 12, 
                    backgroundColor:
                    selectedRow === rowData.tableData.id ? '#ec5114' : '#FFF'
                })
             }}  
             />   
   </div>
      ); 

  };
 
  export default React.memo(MTable);