import { List } from 'immutable';
import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { FlatList, Text, View } from 'react-native';

import { SORT_MODES, AUCTION_VIEW_MODES } from '../constants/constants.js';

import FilterBar from '../components/Auction/FilterBar.js';
import AuctionListItem from '../containers/Auction/AuctionListItem.js';

import styles from './Auction.styles.js';

export default class Auction extends Component {
    static get propTypes() {
        return {
            changeFilter: PropTypes.func,
            changeViewMode: PropTypes.func.isRequired,
            fetchItems: PropTypes.func.isRequired,
            fetchStatus: PropTypes.func.isRequired,
            items: PropTypes.oneOfType([PropTypes.array, PropTypes.instanceOf(List)]),
        };
    }

    static get defaultProps() {
        return {
            changeFilter: () => {
                console.log('Change Filter Default Prop', arguments);
            },
            items: [],
        };
    }

    constructor(props) {
        super(props);

        this.changeFilter = this.changeFilter.bind(this);
        this.changeViewMode = this.changeViewMode.bind(this);

        this.state = {
            sort: SORT_MODES.TITLE_ASC,
            view: AUCTION_VIEW_MODES.ALL,
        };
    }

    componentDidMount() {
        this.props.fetchStatus();
        this.props.fetchItems();
    }

    changeFilter(filter) {
        this.props.changeFilter('auction', filter);
    }

    changeViewMode(viewMode) {
        this.props.changeViewMode(viewMode);
    }

    _keyExtractor = (item, index) => `${item.id}_${index}`;

    _renderAuctionListItem = ({ item }) => <AuctionListItem item={item} />;

    render() {
        const { items } = this.props;
        const { sort, view } = this.state;

        return (
            <View style={styles.container}>
                <FilterBar
                    changeFilterer={this.changeFilter}
                    changeViewMode={this.changeViewMode}
                />
                {items.size > 0 && (
                    <FlatList
                        data={items}
                        keyExtractor={this._keyExtractor}
                        renderItem={this._renderAuctionListItem}
                        contentContainerStyle={styles.itemListContentContainer}
                        style={styles.itemList}
                    />
                )}
            </View>
        );
    }
}