import React from 'react';
import { SkeletonLoader, Table } from '@theorchard/suite-components';
import classNames from 'classnames';
import { range } from 'lodash-es';
import './table-basic.scss';

export interface TableBasicProps {
    headers: string[];
    isLoading?: boolean;
    itemsPerPage?: number;
    rows: {
        id: string | number;
        cols: React.ReactNode[];
    }[];
    tableClassName?: string;
    hover?: boolean;
}

export default function TableBasic({
    headers,
    isLoading = false,
    itemsPerPage = 1,
    rows,
    tableClassName = 'TableBasic',
    hover = false,
}: TableBasicProps) {
    return (
        <Table
            className={classNames(tableClassName || 'TableBasic')}
            hover={hover}
        >
            <thead>
                <tr>
                    {headers.map((header, index) => (
                        <th
                            key={header}
                            className={`TableBasic-header cols-${index}`}
                            data-testid="tableBasicHeaderCellTestId"
                        >
                            {header}
                        </th>
                    ))}
                </tr>
            </thead>
            <tbody>
                {isLoading &&
                    itemsPerPage &&
                    range(itemsPerPage).map(key => (
                        <tr key={key}>
                            {headers.map(header => (
                                <td key={`${header}-${key}`}>
                                    <div className={`${header}-loader`}>
                                        <SkeletonLoader />
                                    </div>
                                </td>
                            ))}
                        </tr>
                    ))}
                {!isLoading &&
                    rows.map(row => (
                        <tr key={`row-${row.id}`}>
                            {
                                /* eslint-disable react/no-array-index-key */
                                row.cols.map((val, index) => (
                                    <td
                                        key={`${val}-${index}`}
                                        className={`TableBasic-column cols-${index}`}
                                        data-testid="tableBasicBodyCellTestId"
                                    >
                                        {val}
                                    </td>
                                ))
                                /* eslint-enable react/no-array-index-key */
                            }
                        </tr>
                    ))}
            </tbody>
        </Table>
    );
}