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 dataLoad =    props.data.map(({user, ...others})=>({...others, 'user': user ? user : {name: 'Aguardando atendente', email:''}}));

  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= {props.table_title}    
                columns={columnsLoad} 
                data={dataLoad}  

                
                

                onRowClick={(evt, selectedRow) => { 

                  console.log(selectedRow.tableData.id);
                  console.log(selectedRow);  
                  console.log(selectedRow.messages); 
                  setSelectedRow(selectedRow.tableData.id)  

                  if(props.hasChild) { 
                    render(<Modal data={selectedRow.messages} 
                      hasChild={false} 
                      modal_header={'Chat do atendimento pelo Whatsapp'}
                      user={selectedRow.user.name} 
                      clientContactNumber={selectedRow.contact.number}/>)  
                  }
                  
                  console.log('props.hasChild: ', props.hasChild)

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

  };
 

  export default React.memo(MTable)