import React from 'react';
import PropTypes from 'prop-types';

import { Padder } from './Padder'

import '../styles/main.css';
// import '../styles/table.css'

export const Table = ({ columns, data, empty, width, height }) => {

    const tableWidth = width ? width : '100%'
    const tableHeight = height ? height : 300

    return (
        <div style={{ minWidth: '100%'}} >
                <div style={{ borderRadius: 25, border: '1px solid #DCDCDC', backgroundColor: '#fff' }}>
                    <Padder top="1em" bottom="1em" left="2em" right="2em">
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
                            {columns.map(column => {
                                if (column.hasOwnProperty('index')) {
                                    if (column.index === true) {
                                        return <label style={{ margin: 0 }}>{column.header}</label>
                                    }
                                } else {
                                    return <p style={{ margin: 0 }}>{column.header}</p>
                                }
                            })}
                        </div>
                    </Padder>
                </div>           
            <div style={{ overflowY: 'scroll', maxHeight: tableHeight }}>
                <Padder top="1em">
                {data.length > 0
                    ?
                    data.map(row => {
                        return (
                            <div style={{ borderRadius: 35, border: '1px solid #DCDCDC', marginBottom: "1em", backgroundColor: '#fff'}}>
                                <Padder top="1.5em" bottom="1.5em" left="2em" right="2em">
                                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                        {columns.map(column => {
                                            if (column.hasOwnProperty('index')) {
                                                if (column.index === true) {
                                                    return <label style={{ margin: 0 }}>{row[column.accessor]}</label>
                                                }
                                            } else {
                                                if (row[column.accessor].hasOwnProperty('color')) {
                                                    return <p style={{ margin: 0, color: row[column.accessor].color }}>{row[column.accessor].text}</p>
                                                } else {
                                                    return <p style={{ margin: 0 }}>{row[column.accessor]}</p>
                                                }
                                            }
                                        })}
                                    </div>
                                </Padder>
                            </div>
                        )
                    })
                    :
                    <>
                    {/* <tbody> */}
                        {/* {data.map(row => {
                    return (
                        <tr>
                            {columns.map(column => {
                                return <td>{row[column.accessor]}</td>
                            })}
                        </tr>
                    )
                })} */}
                        {/* <tr>
                            {columns.map(() => {
                                return <td></td>
                            })}
                        </tr> */}
                    {/* </tbody> */}
                    <Padder top="1em">
                    <p style={{ textAlign: "center" }}>{empty || 'No data here yet'}</p>

                    </Padder>
                    </>
                }
                </Padder>
            </div>
        </div>
    );
}