import React, { Component } from 'react';
import { FlatList, Platform, Text, TouchableHighlight } from 'react-native';
import styles from '../../styles/Selector';
const ITEM_HEIGHT = 50;
export class SelectorList extends Component {
    constructor(props) {
        super(props);
        this.scrollToSelected = (value) => {
            value = value || this.props.selectedValue;
            let index = this.props.items.findIndex(i => i.value === value);
            if (index >= this.props.items.length - 3) {
                index = this.props.items.length - 3;
            }
            if (this.listView.current && index > -1) {
                this.listView.current.scrollToIndex({ index, animated: true });
            }
        };
        this.getItemLayout = (data, index) => ({
            length: this.props.itemHeight || ITEM_HEIGHT,
            offset: (this.props.itemHeight || ITEM_HEIGHT) * index,
            index
        });
        this.renderItem = ({ item, index }) => {
            return (<TouchableHighlight underlayColor='#D0D0D0' disabled={item.disabled} style={[
                { height: this.props.itemHeight || ITEM_HEIGHT },
                styles.item,
                this.props.itemStyle,
                item.selected && styles.selectedItem,
                item.selected && this.props.selectedItemStyle,
                item.disabled && styles.disabledItem,
                item.disabled && this.props.disabledItemStyle
            ]} onPress={this.props.onSelectChange(item.value)}>
        <Text style={[
                styles.itemText,
                this.props.itemTextStyle,
                item.selected && styles.selectedItemText,
                item.selected && this.props.selectedItemTextStyle
            ]}>
          {item.label}
        </Text>
      </TouchableHighlight>);
        };
        this.listView = React.createRef();
    }
    componentDidMount() {
        if (Platform.OS === 'web') {
            return;
        }
        requestAnimationFrame(() => {
            this.scrollToSelected();
        });
    }
    componentDidUpdate() {
        if (Platform.OS !== 'web') {
            return;
        }
        requestAnimationFrame(() => {
            this.scrollToSelected();
        });
    }
    render() {
        const { items } = this.props;
        const itemsWithSelected = items.reduce((result, curr) => {
            if (curr.value === this.props.selectedValue) {
                return [...result, Object.assign({}, curr, { selected: true })];
            }
            return [...result, curr];
        }, []);
        return (<FlatList ref={this.listView} style={styles.itemsContainer} data={itemsWithSelected} renderItem={this.renderItem} getItemLayout={this.getItemLayout}/>);
    }
}
//# sourceMappingURL=SelectorList.js.map