import React, { PureComponent } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import styles from '../../styles/Selector';
import { Modal } from '../Modal';
import { SelectorList } from './SelectorList';
export class Selector extends PureComponent {
    constructor(props) {
        super(props);
        this.renderSelector = () => {
            const { title, items, selectButtonStyle, labelStyle, placeholder, placeholderStyle } = this.props;
            const { selectedValue } = this.state;
            const selectorLabel = (items.find(it => it.value === selectedValue) || {
                label: undefined
            }).label;
            return (<TouchableOpacity style={[styles.selector, selectButtonStyle]} onPress={this.openModal}>
        {!selectorLabel && placeholder ? (<Text style={[styles.placeholderStyle, placeholderStyle]}>
            {placeholder}
          </Text>) : (<Text style={[styles.selectorLabel, labelStyle]}>
            {selectorLabel || placeholder || title || items[0] && items[0].label || null}
          </Text>)}
        {this.renderDropdownArrow()}
      </TouchableOpacity>);
        };
        this.renderDropdownArrow = () => {
            if (this.props.renderDropdownArrow) {
                return this.props.renderDropdownArrow();
            }
            else {
                return <View style={styles.dropdownArrow}/>;
            }
        };
        this.renderCloseButton = () => {
            if (this.props.renderCloseButton) {
                return this.props.renderCloseButton(this.closeModal);
            }
            else {
                return (<TouchableOpacity style={styles.closeButtonContainer} onPress={this.closeModal}>
          <Text style={styles.closeButton}>×</Text>
        </TouchableOpacity>);
            }
        };
        this.renderModal = () => {
            return (<Modal animationType='fade' transparent={true} visible={this.state.modalVisible} onRequestClose={this.closeModal}>
        <View style={styles.modalContainer}>
          <View style={styles.modalContent}>
            <View style={[styles.modalHeader, this.props.modalHeaderStyle]}>
              <Text style={[styles.title, this.props.modalHeaderTextStyle]}>
                {this.props.title || 'Select'}
              </Text>
              {this.renderCloseButton()}
            </View>

            <View>
              <SelectorList items={this.props.items} onSelectChange={this.chooseItem} selectedValue={this.state.selectedValue} itemHeight={this.props.itemHeight} itemStyle={this.props.itemStyle} itemTextStyle={this.props.itemTextStyle} disabledItemStyle={this.props.disabledItemStyle} selectedItemStyle={this.props.selectedItemStyle} selectedItemTextStyle={this.props.selectedItemTextStyle}/>
            </View>
          </View>
        </View>
      </Modal>);
        };
        this.openModal = () => {
            this.setState({
                modalVisible: true
            });
        };
        this.closeModal = () => {
            this.setState({
                modalVisible: false
            });
        };
        this.chooseItem = (value) => {
            return () => {
                this.setState({
                    selectedValue: value
                });
                this.closeModal();
                if (this.props.onValueChange) {
                    this.props.onValueChange(value);
                }
            };
        };
        this.state = {
            modalVisible: false,
            selectedValue: props.selectedValue
        };
    }
    static getDerivedStateFromProps(nextProps, prevState) {
        if (nextProps.selectedValue !== prevState.selectedValue) {
            return {
                selectedValue: nextProps.selectedValue
            };
        }
        return null;
    }
    render() {
        return (<View style={this.props.style}>
        {this.renderSelector()}
        {this.renderModal()}
      </View>);
    }
}
//# sourceMappingURL=Selector.js.map