import React from "react";
import Tippy from '@tippyjs/react';

interface TableHeadProps
{
    headers: any;
    handleSort: (index: number) => void;
    orderBy: number;
    orderDirection: string;
}

const TableHeader = ({headers, handleSort, orderBy, orderDirection}: TableHeadProps) => {
    return (
        <thead key='header'>
        <tr className="tablesorter-headerRow">
            {Object.keys(headers).map((key, index) => {
                    const header = headers[key];
                    const handleClick = header?.disableSort ? undefined : () => handleSort(index);
                    let orderByClass = '';
                    if (orderBy === index) {
                        if (orderDirection === 'asc') {
                            orderByClass = 'tablesorter-headerAsc ';
                        } else {
                            orderByClass = 'tablesorter-headerDesc ';
                        }
                    }

                    return (
                        <Tippy key={key} className='p-1'
                               content={`Sort by ${header instanceof Object ? header?.name : header}`}
                               arrow disabled={header?.disableSort} interactive={true}>
                            <th key={key} className={'datagrid_cell '
                                + (header?.disableSort ? ' ' : 'tablesorter-header ')
                                + orderByClass
                                + (header?.addStyle ? header.addStyle : '')}
                                onClick={handleClick}
                            >
                                {header instanceof Object ? header?.name : header}
                            </th>
                        </Tippy>
                    )
                }
            )}
        </tr>
        </thead>
    );
};

export default TableHeader;
