import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom'

import { Padder } from './Padder'
import { Button } from './Button'

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

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

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

    return (
        <div className='table-container' style={{ minWidth: tableWidth, height: tableHeight + 75 }} >

            <div style={{ borderBottom: '1px solid #DCDCDC' }}>
                <Padder top="1em" bottom="1em" left="2em" right="2em">
                    {name && <h6 style={{ textAlign: 'center' }}>{name}</h6>}
                    <div className='table-row'>
                        {columns.map(column => {
                            if (column.hasOwnProperty('index')) {
                                if (column.index === true) {
                                    return <div className='row-item'><label style={{ margin: 0 }}>{column.header}</label></div>
                                }
                            } else {
                                return <div className='row-item'><p style={{ margin: 0 }}>{column.header}</p></div>
                            }
                        })}
                    </div>
                </Padder>
            </div>
            <div style={{ overflowY: 'scroll', height: tableHeight }}>
                {data.length > 0
                    ?
                    data.map(row => {
                        return (
                            <div style={{ borderBottom: '1px solid #DCDCDC' }}>

                                <Padder top="1em" bottom="1em" left="2em" right="2em">
                                    <div className='table-row'>
                                        {columns.map(column => {
                                            if (column.hasOwnProperty('index')) {
                                                if (column.index === true) {
                                                    if (row[column.accessor].hasOwnProperty('color')) {
                                                        return <div className='row-item'><label style={{ margin: 0, color: row[column.accessor].color }}>{row[column.accessor].text}</label></div>
                                                    } else if (row[column.accessor].hasOwnProperty('link')) {
                                                        return <div className='row-item'><Link to={row[column.accessor].link}><Button intent="minimal" >{row[column.accessor].text}</Button></Link></div>
                                                    } else {
                                                        return <div className='row-item'><label style={{ margin: 0 }}>{row[column.accessor]}</label></div>
                                                    }
                                                }
                                            } else {
                                                if (row[column.accessor].hasOwnProperty('color')) {
                                                    return <div className='row-item'><p style={{ margin: 0, color: row[column.accessor].color }}>{row[column.accessor].text}</p></div>
                                                } else if (row[column.accessor].hasOwnProperty('link')) {
                                                    return <div className='row-item'><Link to={row[column.accessor].link}><Button intent="minimal" >{row[column.accessor].text}</Button></Link></div>
                                                } else {
                                                    return <div className='row-item'><p style={{ margin: 0 }}>{row[column.accessor]}</p></div>
                                                }
                                            }
                                        })}
                                    </div>
                                </Padder>
                            </div>
                        )
                    })
                    :
                    <>
                        <Padder top="4em">
                            <p style={{ textAlign: "center" }}>{empty || 'No data here yet'}</p>

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