import React, { useMemo }                                            from 'react';
import { Scrollbars }                                                from 'react-custom-scrollbars';
import { Wrapper }                                                   from '@geenee/ui/src/lib/component/wrapper/wrapper.component';
import { DataRow }                                                   from './components/DataRow';
import { TableHeader }                                               from './components/TableHeader';
import { BorderLine, ColumnContainer, RowContainer, TableContainer } from './styles';

export type StyledTableColumns<T> = {
    key: string;
    label: string | JSX.Element;
    render?: (item: T) => JSX.Element;
    onClick?: (val: string | number | boolean | T) => void | Promise<void>;
    width?: string;
    className?: string;
}

export enum TableActionName {
    Remove = 'remove',
    Edit = 'edit2'
}

type StyledTableProps<T> = {
    columns: StyledTableColumns<T>[];
    data: T[];
    rowActions?: { id: TableActionName; onClick: (item: T) => void }[];
    preTableRow?: JSX.Element;
    tableWidth?: string;
    styles?: {
        row: React.CSSProperties;
    };
    minWidth?: string;
    tableBottomContent?: JSX.Element;
    scrollHeight?: string;
    disabled?: boolean;
    emptyContent?: JSX.Element;
}

export function StyledTable<T, >({
    columns, data, rowActions, disabled, emptyContent,
    preTableRow, tableWidth, styles, minWidth, tableBottomContent, scrollHeight = '80%'
}: StyledTableProps<T>): JSX.Element {
    const tableContent = useMemo(() => {
        if (!data.length) {
            return emptyContent || (
                <RowContainer valign='center' fullWidth height='64px'>
                    <ColumnContainer>
                        List is empty
                    </ColumnContainer>
                </RowContainer>
            );
        }

        return (
            data.map((item, index) => (
                <React.Fragment key={ `row_${ index }` }>
                    { index ? <BorderLine /> : <></> }
                    <DataRow<T>
                        row={ item }
                        columns={ columns }
                        rowActions={ rowActions }
                        style={ styles?.row }
                    />
                </React.Fragment>
            ))
        );
    }, [ data ]);

    return (
        <TableContainer minWidth={ minWidth }>
            { preTableRow || null }
            <Wrapper frame="solid-default" maxWidth={ tableWidth }>
                <TableHeader
                    disabled={ disabled }
                    columns={ columns }
                    hasActions={ !!rowActions?.length }
                />
                <Scrollbars
                    autoHeight
                    autoHide
                    autoHideTimeout={ 500 }
                    autoHideDuration={ 200 }
                    autoHeightMax={ scrollHeight }
                >
                    { tableContent }
                </Scrollbars>
            </Wrapper>
            { tableBottomContent }
        </TableContainer>
    );
}