import React, { PureComponent } from 'react';
import { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Accordion } from '../Accordion';
import { SelectableRow } from '../SelectableRow';
const defaultSingleFilterIds = [`cgid`];
const S = StyleSheet.create({
    titleStyle: {
        fontWeight: 'bold',
        fontSize: 15
    },
    valueButton: {
        height: 40
    },
    applyButton: {
        marginLeft: 10,
        marginVertical: 10,
        height: 40,
        flex: 1,
        backgroundColor: '#eee',
        alignItems: 'center',
        justifyContent: 'center'
    },
    container: {
        flex: 1
    },
    buttonsContainer: {
        flexDirection: 'row',
        marginRight: 10
    },
    accordionheader: {
        flexDirection: 'row',
        justifyContent: 'space-between'
    },
    selectedValueStyle: {
        color: '#999',
        fontSize: 13,
        marginHorizontal: 10,
        textAlign: 'right',
        flex: 1
    }
});
export class FilterList extends PureComponent {
    constructor(props) {
        super(props);
        this.handleSelect = (id, value) => () => {
            const { selectedItems } = this.state;
            const singleFilterIds = this.props.singleFilterIds || defaultSingleFilterIds;
            if (selectedItems[id] && singleFilterIds.indexOf(id) === -1) {
                const findIndex = selectedItems[id].indexOf(value);
                if (findIndex > -1) {
                    selectedItems[id].splice(findIndex, 1);
                }
                else {
                    selectedItems[id].push(value);
                }
                this.setState({
                    selectedItems: Object.assign({}, selectedItems)
                });
            }
            else {
                this.setState({
                    selectedItems: Object.assign({}, selectedItems, { [id]: [value] })
                });
            }
        };
        this.renderFilterItemValue = (item) => (value, i) => {
            const selected = this.state.selectedItems[item.id] &&
                this.state.selectedItems[item.id].indexOf(value.value) > -1;
            if (this.props.renderFilterItemValue) {
                return this.props.renderFilterItemValue(item, value, this.handleSelect(item.id, value.value), selected);
            }
            return (<SelectableRow key={i} title={value.title} selected={selected} onPress={this.handleSelect(item.id, value.value)} {...this.props.selectableRowProps}/>);
        };
        this.renderFilterItem = ({ item }) => {
            const selectedValues = this.state.selectedItems[item.id] || [];
            const selectedValueTitle = item.values
                .filter((v) => selectedValues.indexOf(v.value) > -1)
                .map((v) => v.title);
            const accordionTitle = this.props.renderFilterTitle ? (this.props.renderFilterTitle(item, selectedValues)) : (<View style={[S.accordionheader, this.props.itemStyle]}>
        <Text style={[S.titleStyle, this.props.itemTextStyle]}>
          {item.title}
        </Text>
        <Text style={S.selectedValueStyle} numberOfLines={1} ellipsizeMode='tail'>
          {selectedValueTitle.join(', ')}
        </Text>
      </View>);
            return (<Accordion title={accordionTitle} content={item.values.map(this.renderFilterItemValue(item))} {...this.props.accordionProps}/>);
        };
        this.handleApply = () => {
            this.props.onApply(this.state.selectedItems);
        };
        this.handleRest = () => {
            this.setState({ selectedItems: {} });
            this.props.onReset();
        };
        this.state = {
            selectedItems: props.selectedItems || {}
        };
    }
    static getDerivedStateFromProps(nextProps) {
        return {
            selectedItems: nextProps.selectedItems || {}
        };
    }
    render() {
        const _items = [...this.props.items];
        return (<View style={[S.container, this.props.style]}>
        <FlatList data={_items} renderItem={this.renderFilterItem}/>
        <View style={[S.buttonsContainer, this.props.buttonContainerStyle]}>
          <TouchableOpacity style={[S.applyButton, this.props.resetButtonStyle]} onPress={this.handleRest}>
            <Text style={this.props.resetButtonTextStyle}>
              {this.props.resetText || 'RESET'}
            </Text>
          </TouchableOpacity>
          <TouchableOpacity style={[S.applyButton, this.props.applyButtonStyle]} onPress={this.handleApply}>
            <Text style={this.props.applyButtonTextStyle}>
              {this.props.applyText || 'APPLY'}
            </Text>
          </TouchableOpacity>
        </View>
      </View>);
    }
}
//# sourceMappingURL=FilterList.js.map