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

import Icon from '../Icon';
import Translate from '../Translate';

import './style.scss';

const Table = ({header, data, sortByCallback}) => {
    if (!data.length) {
        return null;
    }

    const tableHead = header.length && (
        <thead>
            <tr className="Table__row">
                {header.map((item) => {
                    const headerCellStyle = ClassName('Table__item Table__item_header', {
                        Table__item_right: item.alignRight,
                        Table__item_sortable: item.sortable,
                    });
                    return (
                        <th
                            style={{
                                width: item.colWidth ? `${item.colWidth}%` : undefined,
                            }}
                            key={item.title}
                        >
                            <div
                                className={headerCellStyle}
                                onClick={() => item.sortable && sortByCallback(item.value)}

                            >
                                {item.sortByThisField && (
                                    <Icon
                                        name={item.sortOrder === 'asc' ? 'arrow-down' : 'arrow-up'}
                                        size="small"
                                    />
                                )}
                                <Translate tag={item.title} />
                            </div>
                        </th>
                    );
                })}
            </tr>
        </thead>
    );

    return (
        <table className="Table">
            {tableHead}
            <tbody>
                {data.map((row) => {
                    return (
                        <tr
                            className="Table__row"
                            key={Math.random()}
                        >
                            {header.map((cellName) => {
                                const itemCellStyle = ClassName('Table__item', {
                                    Table__item_right: cellName.alignRight,
                                });

                                return (
                                    <td key={Math.random()}>
                                        <div className={itemCellStyle}>
                                            {row[cellName.alias]}
                                        </div>
                                    </td>
                                );
                            })}
                        </tr>
                    );
                })}
            </tbody>
        </table>
    );
};

Table.propTypes = {
    data: PropTypes.array.isRequired,
    header: PropTypes.array,
    sortByCallback: PropTypes.func,
};

Table.defaultProps = {
    header: [],
};

export default Table;