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 (

    <MaterialTable
      title={props.table_title}
      columns={columnsLoad}
      data={dataLoad}

      maxWidth={true} 
       
      onRowClick={(evt, selectedRow) => {

        if(props.removeClickRow){
          return
        }
 
        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'
        })
      }}
    />
  );

};


export default React.memo(MTable)