import * as React from 'react';
import * as _ from 'lodash';
import * as DefaultStyles from './style';
import Scroller from '../Scroller'
import LoadingSpinner from "../LoadingSpinner";

export namespace List {
    export interface Props {
        /**
         * Number of items to show per 'jump' or section, when the component
         * does not show all the elements at once in the list
         */
        showLoadMoreButton?: boolean;
        handleItemClick?: any;
        handleShowMore?: () => void;
        customLoadingAnimation?: any;
        status?: string;
        children?: any;
        id?: string;
        name?: string;
        onScroll?: (e) => void;
        styles?: Styles;
    }

    export interface Styles {
        ListItemsContainer?: any,
        ItemsStyles?: any,
        ListBottom?: any,
        LoadMoreButton?: any,
        LoadMoreButtonContainer?: any,
        ScrollWrapper?: any,
        MemberList?: any
    }
}

export default class List extends React.Component<List.Props> {
    constructor(props: List.Props) {
        super(props);
    }

    handleShowMore = () => {
        this.props.handleShowMore && this.props.handleShowMore();
    };

    handleOnFocus = () => {
        this.handleShowMore();
    }



    loadMore = (Styles) => {
        if (this.props.showLoadMoreButton && this.props.handleShowMore) {
            return (
                <Styles.LoadMoreButtonContainer id={this.props.id && this.props.id + '-load-more-container-div'} name={this.props.name && this.props.name + '-load-more-container-div'}>
                    <Styles.LoadMoreButton id={this.props.id && this.props.id + '-load-more-button-div'} name={this.props.name && this.props.name + '-load-more-button-div'} onClick={this.handleShowMore}>
                        LOAD MORE
                    </Styles.LoadMoreButton>
                </Styles.LoadMoreButtonContainer>);
        }
        else {
            return (
                <Styles.ListBottom
                    onMouseEnter={this.handleOnFocus}
                    id={this.props.id && this.props.id + '-list-bottom-div'}
                    name={this.props.name && this.props.name + '-list-bottom-div'}
                />);
        }

    }

    selectLoadingAnimation = (Custom): JSX.Element => {
        if (Custom) {
            return <Custom />;
        }
        else {
            return <LoadingSpinner id={this.props.id && this.props.id + '-loading-spinner'} name={this.props.name && this.props.name + '-loading-spinner'} />
        }
    }

    render() {
        const Styles: List.Styles = _.merge(DefaultStyles, this.props.styles);
        const children = React.Children.map(this.props.children, (child: any, index: number) => {
            return React.cloneElement(child, {
                styles: (Styles && Styles.ItemsStyles) ? Styles.ItemsStyles : {},
                onClick: () => this.props.handleItemClick && this.props.handleItemClick(index)
            });
        })
        return (
            <Scroller onScroll={this.props.onScroll}>
                <Styles.ListItemsContainer id={'list-container'} name={this.props.name && this.props.name + '-list-container'}>
                    {this.props.status === 'LOADING' ?
                        this.selectLoadingAnimation(this.props.customLoadingAnimation)
                        :
                        <Styles.MemberList id={this.props.id && this.props.id + '-member-list-ul'} name={this.props.name && this.props.name + '-member-list-ul'}>
                            {children}
                            {
                                this.loadMore(Styles)
                            }
                        </Styles.MemberList>
                    }
                </Styles.ListItemsContainer>
            </Scroller >

        );
    }
}