import { IBubble } from '../../store/bubbles/types';
import React, { FunctionComponent } from 'react';
import { ViewStyle, View, StyleSheet, TextStyle, Text, Dimensions, RefreshControlProps } from 'react-native';
import { Strings } from '../../resources/localization/Strings';
import { IStyledProps } from '../common/types';
import { DataProvider, LayoutProvider, RecyclerListView } from 'recyclerlistview';


interface IBubbleProps extends IStyledProps<IBubbleStyleProps> {
    bubbles: IBubble[];
    cellWidth?: number;
    cellHeight?: number;
    refreshControl?: React.ReactElement<RefreshControlProps>;
    renderItems: (bubble: IBubble) => React.ReactElement;
    renderListEmpty?: () => React.ReactElement;
}

export interface IBubbleStyleProps {
    listContainer?: ViewStyle;
    containerStyle?: ViewStyle;
    noDataMessageText?: TextStyle;
    noDataMessageView?: ViewStyle;
}

export const BubblesContainer: FunctionComponent<IBubbleProps> = (props: IBubbleProps) => {
    const width = props.cellWidth ? props.cellWidth : Dimensions.get('window').width;
    const height = props.cellHeight ? props.cellHeight : 80;
    const mergedStyle = { ...defaultStyle, ...props.style };

    const dataProvider = new DataProvider((r1: any, r2: any) => {
        return r1 !== r2;
    }).cloneWithRows(props.bubbles);


    const layoutProvider = new LayoutProvider(() => 'BUBBLES',
        (type: any, dim: { width: number; height: number }) => {
            switch (type) {
                case 'BUBBLES':
                    dim.width = width;
                    dim.height = height;
                    break;
                default:
                    dim.width = width;
                    dim.height = 0;
            }
        }
    );


    const renderEmptyList = () => {
        if (props.renderListEmpty) {
            return props.renderListEmpty;
        }
        else {
            return (
                <View style={mergedStyle.noDataMessageView}>
                    <Text style={mergedStyle.noDataMessageText}>{Strings.noDataFound}</Text>
                </View>
            );
        }
    };

    const renderItems = (type: string | number, item: IBubble) => {
        return props.renderItems(item);
    };

    const renderBubblesListContent = () => {
        if (props.bubbles.length === 0) {
            return renderEmptyList();
        }
        else {
            return (
                <View style={mergedStyle.listContainer}>
                    <RecyclerListView
                        layoutProvider={layoutProvider}
                        dataProvider={dataProvider}
                        rowRenderer={renderItems}
                        scrollViewProps={{
                            refreshControl: (
                                props.refreshControl
                            )
                        }}
                    />
                </View>
            );
        }
    }
    return (
        <View style={mergedStyle.listContainer}>
            {renderBubblesListContent()}
        </View>
    );
}

const defaultStyle: IBubbleStyleProps = StyleSheet.create({
    noDataMessageView: {
        fontSize: 25,
        justifyContent: 'center',
        flex: 1,
        marginTop: 100,
    },
    noDataMessageText: {
        textAlign: 'center',
    },
    containerStyle: {
        flex: 1,
        backgroundColor: '#ffffff',
        height: 'auto',
    },
    listContainer: {
        flex: 1,
        flexDirection: 'row',
        minHeight: 1,
    }


});