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

export interface TableWithSortableHeaderProps {
    headers: {
        label: string;
        value: string;
        sortable: boolean;
    }[];
    isLoading?: boolean;
    itemsPerPage?: number;
    onClickHandler: (headerValue: string) => void;
    rows: {
        id: string | number;
        cols: React.ReactNode[];
    }[];
    sortBy?: string;
    sortOrder?: 'asc' | 'desc';
    className?: string;
}

export default function TableWithSortableHeader({
    headers,
    isLoading,
    itemsPerPage,
    onClickHandler,
    rows,
    sortBy,
    sortOrder,
    className,
}: TableWithSortableHeaderProps) {
    const sortableHeaders = () =>
        headers.map(item => (
            <th
                key={item.value}
                onClick={() =>
                    rows.length !== 0 &&
                    item.sortable &&
                    onClickHandler(item.value)
                }
                className={classNames(item.value, {
                    active: rows.length !== 0 && sortBy === item.value,
                })}
                data-testid="sortableTableHeaderCellTestid"
            >
                <div className="headerName">{item.label}</div>
                <div className="sortIcon">
                    {item.sortable &&
                        (rows.length &&
                        sortBy === item.value &&
                        sortOrder === 'desc' ? (
                            <GlyphIcon name="chevronUp" size={12} />
                        ) : (
                            <GlyphIcon name="chevronDown" size={12} />
                        ))}
                </div>
            </th>
        ));

    const tableBody = () =>
        !isLoading &&
        rows.map(row => (
            <tr key={`row-${row.id}`}>
                {row.cols.map((val, index) => (
                    <td
                        /* eslint-disable-next-line react/no-array-index-key */
                        key={`${val}-${index}`}
                        data-testid="sortableTableBodyCellTestid"
                    >
                        {val}
                    </td>
                ))}
            </tr>
        ));

    const loaderWrapper = () =>
        isLoading &&
        itemsPerPage &&
        range(itemsPerPage).map(key => (
            <tr key={key}>
                {headers.map(item => (
                    <td key={`${item.value}`}>
                        <div className={`${item.value}-loader`}>
                            <SkeletonLoader />
                        </div>
                    </td>
                ))}
            </tr>
        ));

    return (
        <Table className={classNames('TableSorting', className)} hover>
            <thead>
                <tr
                    className={classNames({
                        sortableHeader: rows.length !== 0,
                    })}
                >
                    {sortableHeaders()}
                </tr>
            </thead>
            <tbody>
                {loaderWrapper()}
                {tableBody()}
            </tbody>
        </Table>
    );
}