import React, { PureComponent } from 'react';
import { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { SelectableRow } from '../SelectableRow';
import FSI18n, { translationKeys } from '@brandingbrand/fsi18n';
const defaultSingleFilterIds = [`cgid`];
const S = StyleSheet.create({
    title: {
        fontWeight: 'bold',
        fontSize: 15
    },
    titleSelected: {
        fontWeight: '800'
    },
    valueButton: {
        height: 40
    },
    container: {
        flex: 1
    },
    buttonsContainer: {
        flexDirection: 'row',
        marginRight: 10
    },
    firstLevelItem: {},
    firstLevelItemContainer: {
        padding: 15,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        borderBottomColor: '#ccc',
        borderBottomWidth: StyleSheet.hairlineWidth
    },
    selectedValueStyle: {
        color: '#999',
        fontSize: 13,
        marginTop: 3,
        maxWidth: 300
    },
    arrow: {
        width: 14,
        height: 14,
        borderColor: '#555',
        borderBottomWidth: 1,
        borderLeftWidth: 1
    },
    arrowBack: {
        transform: [{ rotate: '45deg' }]
    },
    arrowNext: {
        transform: [{ rotate: '-135deg' }]
    },
    arrowContainer: {
        position: 'absolute',
        left: 15,
        top: 18
    },
    secondLevelHeader: {
        height: 50,
        paddingHorizontal: 10,
        borderBottomColor: '#aaa',
        borderBottomWidth: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    secondLevelTitle: {
        fontWeight: 'bold'
    },
    resetButton: {
        position: 'absolute',
        left: 15,
        top: 0,
        height: 50,
        justifyContent: 'center',
        alignItems: 'center'
    },
    applyButton: {
        position: 'absolute',
        right: 15,
        top: 0,
        height: 50,
        justifyContent: 'center',
        alignItems: 'center'
    },
    filterHeader: {
        height: 50,
        justifyContent: 'center',
        alignItems: 'center',
        borderBottomColor: '#aaa',
        borderBottomWidth: 1
    },
    filterTitle: {
        fontSize: 20
    }
});
export class FilterListDrilldown extends PureComponent {
    constructor(props) {
        super(props);
        this.handleSelect = (id, value) => () => {
            const { selectedItems } = this.state;
            const singleFilterIds = this.props.singleFilterIds || defaultSingleFilterIds;
            let nextSelectedItems = null;
            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);
                }
                nextSelectedItems = Object.assign({}, selectedItems);
            }
            else {
                nextSelectedItems = Object.assign({}, selectedItems, { [id]: [value] });
            }
            this.setState({ selectedItems: nextSelectedItems });
            if (this.props.applyOnSelect) {
                this.props.onApply(nextSelectedItems);
            }
        };
        this.renderFilterItemValue = (filterItem, skipCustomRender) => ({ item, index }) => {
            const selected = this.state.selectedItems[filterItem.id] &&
                this.state.selectedItems[filterItem.id].indexOf(item.value) > -1;
            if (this.props.renderFilterItemValue && !skipCustomRender) {
                return this.props.renderFilterItemValue(filterItem, index || 0, item, this.handleSelect(filterItem.id, item.value), selected, this.renderFilterItemValue);
            }
            return (<SelectableRow key={index} title={item.title} selected={selected} onPress={this.handleSelect(filterItem.id, item.value)} {...this.props.selectableRowProps}/>);
        };
        this.renderFilterItem = ({ item, index }, skipCustomRender = false) => {
            const selectedValues = this.state.selectedItems[item.id] || [];
            const selectedValueTitles = item.values
                .filter((v) => selectedValues.indexOf(v.value) > -1)
                .map((v) => v.title);
            if (this.props.renderFilterItem && !skipCustomRender) {
                return this.props.renderFilterItem(item, index || 0, selectedValues, this.drilldown(item), this.renderFilterItem);
            }
            return (<TouchableOpacity style={[S.firstLevelItemContainer, this.props.itemStyle]} onPress={this.drilldown(item)}>
        <View style={S.firstLevelItem}>
          <Text style={[
                S.title,
                selectedValueTitles.length ? S.titleSelected : false,
                this.props.itemTextStyle,
                (this.props.ignoreActiveStyleIds || []).indexOf(item.id) === -1 &&
                    selectedValueTitles.length ? this.props.itemTextSelectedStyle : false
            ]}>
            {item.title}
            {selectedValueTitles.length
                ? ` (${selectedValueTitles.length})`
                : ''}
          </Text>
          <Text style={[
                S.selectedValueStyle,
                (this.props.ignoreActiveStyleIds || []).indexOf(item.id) === -1 &&
                    this.props.selectedValueStyle
            ]} numberOfLines={1} ellipsizeMode='tail'>
            {selectedValueTitles.join(', ') || 'All'}
          </Text>
        </View>
        <View style={[S.arrow, S.arrowNext]}/>
      </TouchableOpacity>);
        };
        this.handleApply = () => {
            this.props.onApply(this.state.selectedItems, { isButtonPress: true });
        };
        this.handleRest = () => {
            this.setState({ selectedItems: {} });
            this.props.onReset({ isButtonPress: true });
        };
        this.drilldown = (item) => () => {
            this.setState({
                secondLevelItem: item
            });
        };
        this.backToFirstLevel = () => {
            this.setState({
                secondLevelItem: null
            });
        };
        this.renderSecondLevel = (item, skipCustomRender) => {
            if (this.props.renderSecondLevel && !skipCustomRender) {
                return this.props.renderSecondLevel(item, this.backToFirstLevel, this.renderSecondLevel);
            }
            return (<View style={{ flex: 1 }}>
        <TouchableOpacity style={S.secondLevelHeader} onPress={this.backToFirstLevel}>
          <View style={S.arrowContainer}>
            <View style={[S.arrow, S.arrowBack]}/>
          </View>
          <Text style={S.secondLevelTitle}>{item.title}</Text>
        </TouchableOpacity>
        <FlatList data={item.values} renderItem={this.renderFilterItemValue(item)} extraData={this.state}/>
      </View>);
        };
        this.renderDrilldownHeader = () => {
            return (<View style={S.filterHeader}>
        {Object.keys(this.state.selectedItems).length ? (<TouchableOpacity style={[S.resetButton, this.props.resetButtonStyle]} onPress={this.handleRest}>
            <Text style={this.props.resetButtonTextStyle}>
              {this.props.resetText || 'Clear All'}
            </Text>
          </TouchableOpacity>) : null}
        <TouchableOpacity style={[S.applyButton, this.props.applyButtonStyle]} onPress={this.handleApply}>
          <Text style={this.props.applyButtonTextStyle}>
            {this.props.applyText || 'Done'}
          </Text>
        </TouchableOpacity>
        <Text style={S.filterTitle}>
          {FSI18n.string(translationKeys.flagship.sort.actions.refine.actionBtn)}
        </Text>
      </View>);
        };
        this.state = {
            selectedItems: props.selectedItems || {},
            secondLevelItem: null
        };
    }
    static getDerivedStateFromProps(nextProps, prevState) {
        const secondLevelItem = prevState.secondLevelItem
            ? nextProps.items.find(item => item.id === prevState.secondLevelItem.id)
            : null;
        return {
            selectedItems: nextProps.selectedItems || {},
            secondLevelItem
        };
    }
    render() {
        return (<View style={[S.container, this.props.style]}>
        <View style={{
            flex: 1,
            display: this.state.secondLevelItem ? 'none' : 'flex'
        }}>
          {this.renderDrilldownHeader()}
          <FlatList data={this.props.items} renderItem={this.renderFilterItem} extraData={this.state.selectedItems}/>
        </View>

        {this.state.secondLevelItem &&
            this.renderSecondLevel(this.state.secondLevelItem)}
      </View>);
    }
}
//# sourceMappingURL=FilterListDrilldown.js.map