import { chunk } from 'lodash-es';
import React, { Component } from 'react';
import { Animated, FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
const DEFAULT_COLUMNS = 2;
const DEFAULT_BACK_TOP_BUTTON_SHOW_AT_HEIGHT = 100;
const gridStyle = StyleSheet.create({
    row: {
        flexDirection: 'row',
        flexWrap: 'nowrap'
    },
    item: {
        flexDirection: 'row',
        flexWrap: 'nowrap'
    },
    itemRow: {
        flex: 1,
        justifyContent: 'space-between'
    },
    rowSeparator: {
        width: '100%',
        height: 1,
        backgroundColor: '#8E8E8E'
    },
    columnSeparator: {
        height: '100%',
        width: 1,
        backgroundColor: '#8E8E8E'
    },
    scrollTopButtonContainer: {
        position: 'absolute',
        bottom: 30,
        right: 30,
        zIndex: 200
    },
    scrollTopButton: {
        backgroundColor: '#eee',
        padding: 10
    }
});
export class Grid extends Component {
    constructor(props) {
        super(props);
        this.handleBackToTop = () => {
            if (this.listview.current) {
                this.listview.current.scrollToOffset({ offset: 0 });
            }
        };
        this.handleScroll = (event) => {
            if (event) {
                const scrollY = event.nativeEvent.contentOffset.y;
                const backToTopShowAtHeight = this.props.backToTopShowAtHeight !== undefined
                    ? this.props.backToTopShowAtHeight
                    : DEFAULT_BACK_TOP_BUTTON_SHOW_AT_HEIGHT;
                if (scrollY > backToTopShowAtHeight && !this.state.backToTopVisible) {
                    this.setState({
                        backToTopVisible: true
                    });
                    Animated.timing(this.backTopOpacity, {
                        toValue: 1,
                        useNativeDriver: true
                    }).start();
                }
                else if (scrollY < backToTopShowAtHeight && this.state.backToTopVisible) {
                    this.setState({
                        backToTopVisible: false
                    });
                    Animated.timing(this.backTopOpacity, {
                        toValue: 0,
                        useNativeDriver: true
                    }).start();
                }
            }
        };
        this.keyExtractor = (items, index) => {
            const key = items.map((item) => item && (item.key || item.id)).filter(Boolean).join();
            return key || '' + index;
        };
        this.renderBackToTop = () => {
            const { showBackToTop, backToTopContainerStyle, backToTopButtonStyle, backToTopTextStyle, backToTopText, renderBackToTopButton } = this.props;
            const { backToTopVisible } = this.state;
            if (!showBackToTop || !backToTopVisible) {
                return null;
            }
            const scrollTopContainerStyle = [
                gridStyle.scrollTopButtonContainer,
                {
                    opacity: this.backTopOpacity
                },
                backToTopContainerStyle
            ];
            return (<Animated.View style={scrollTopContainerStyle}>
        {renderBackToTopButton ? (renderBackToTopButton(this.handleBackToTop)) : (<TouchableOpacity style={[gridStyle.scrollTopButton, backToTopButtonStyle]} onPress={this.handleBackToTop}>
            <Text style={backToTopTextStyle}>{backToTopText || 'Top'}</Text>
          </TouchableOpacity>)}
      </Animated.View>);
        };
        this.renderRow = (info) => {
            const { columns = DEFAULT_COLUMNS, columnSeparatorStyle, renderItem, rowSeparatorStyle, showColumnSeparators, showRowSeparators } = this.props;
            const showRowSeparator = this.state.data && this.state.data.length > info.index + 1;
            const columnWidth = Math.floor(100 / columns * 100) / 100;
            return (<View style={gridStyle.row}>
        {info.item.map((item, index) => {
                const showColumnSeparator = (((index + 1) % columns) !== 0);
                return (<View style={[gridStyle.item, { width: columnWidth + '%' }]} key={index}>
              <View style={gridStyle.itemRow}>
                {renderItem({ item, index, separators: info.separators })}
                {showRowSeparators && showRowSeparator && (<View style={[gridStyle.rowSeparator, rowSeparatorStyle]}/>)}
              </View>
              {showColumnSeparators && showColumnSeparator && (<View style={[gridStyle.columnSeparator, columnSeparatorStyle]}/>)}
            </View>);
            })}
      </View>);
        };
        this.listview = React.createRef();
        this.backTopOpacity = new Animated.Value(0);
        this.state = {
            backToTopVisible: false,
            data: chunk(props.data, props.columns)
        };
    }
    static getDerivedStateFromProps(nextProps) {
        return {
            data: chunk(nextProps.data, nextProps.columns || DEFAULT_COLUMNS)
        };
    }
    render() {
        const { style, renderHeader, renderFooter } = this.props;
        let onScroll;
        if (this.props.showBackToTop) {
            onScroll = this.handleScroll;
        }
        return (<View style={{ flex: 1 }}>
        <FlatList data={this.state.data} keyExtractor={this.keyExtractor} ListFooterComponent={renderFooter} ListHeaderComponent={renderHeader} onScroll={onScroll} ref={this.listview} renderItem={this.renderRow} style={style} {...this.props.listViewProps}/>
        {this.renderBackToTop()}
      </View>);
    }
}
//# sourceMappingURL=Grid.js.map