import React from 'react';
import { Loader, Empty } from '../../';
import usePagination from '../../hooks/pagination';

interface List {
    loading?: boolean;
    list: any[];
    loader?: JSX.Element;
    emptyText?: string;
    empty?: JSX.Element;
    map?: any;
    error?: boolean;
    pagination?: any;
}

const List = ({
    loading = false,
    error=false,
    pagination,
    list,
    loader = <Loader.Spinner color='inherit' />,
    emptyText = "No Data",
    empty = <Empty text={emptyText} color="white" style={{ marginTop: 0 }} />,
    map }: List) => {
    
   const { page, canGoBack, canGoForward, actions, needsPagination } = usePagination(list.length, pagination? pagination.items : 0);
    
   if (loading)
        return loader;
    else if (list?.length === 0)
        return empty

    if (pagination) {
        return <>
            {list
            .filter((_, i) => (pagination.items  * (page + 1) >= (i + 1)) &&  (i >= (pagination.items  * page)))
            .map(map)}
            { needsPagination && 
                <div style={{placeSelf: 'end', gridColumn: '1/-1', height: '100%'}}>
                    <i 
                        onClick={actions.backward}
                        style={{color: !canGoBack? 'gray': ''}}
                        className={'fa fa-chevron-left'}
                    >
                    </i>
                    &nbsp; &nbsp;
                    <i 
                        style={{color: !canGoForward? 'gray': ''}}
                        className={'fa fa-chevron-right'} 
                        onClick={actions.forward}
                    >
                    </i>
                </div>
            }
        </>;
    }
    return <>{list.map(map? map: (el)=> el)}</>;
}

export default List;