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

import React from 'react';    

const MTable = (props) => { 
  
  const [selectedRow, setSelectedRow] = useState(null);   


  const dataLoad =    props.data.map((dt) => { return { ...dt }});
  const columnsLoad = props.columns.map((column) => { return { ...column }}); 
 
  useEffect(() => {
   
    console.log(`You have clicked the button ${selectedRow} times`) 
   
  },[selectedRow]);

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

                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,
                  padding: 'dense',  
                  //loadingType: 'linear',
                  searchFieldStyle: {
                    width: 300,
                  },  
                  
                  rowStyle: rowData => ({
                    fontSize: 12, 
                    backgroundColor:
                    selectedRow === rowData.tableData.id ? '#ec5114' : '#FFF'
                })
             }}  
             />   
   </div>
      ); 

  };
 

  export default React.memo(MTable)