import Header from "./Header";
import React from 'react'
import {View, StyleSheet} from 'react-native';
import PropTypes from "prop-types";
import RNPickerSelect from "react-native-picker-select";

export default class SelectHeader extends React.Component {

    onNext() {
        let itemIndex = this.props.selectedIndex + 1;
        if (itemIndex === this.props.items.length) {
            itemIndex = 0;
        }
        this.props.selectItem(itemIndex);
    }

    onPrev() {
        let itemIndex = this.props.selectedIndex - 1;
        if (itemIndex < 0) {
            itemIndex = this.props.items.length - 1;
        }
        this.props.selectItem(itemIndex);
    }

    render() {
        return (
            <Header backgroundColor={this.props.backgroundColor} title={''} selectedItem={this.props.title}
                    rightButtonStyle={{flex: undefined}}
                    iconNameLeft='chevron-left' iconNameRight='chevron-right' iconLeftSize={29} iconRightSize={29}
                    styleTitle={{color: this.props.fontColor}} iconColor={this.props.fontColor}
                    mainStyle={{justifyContent: 'center'}}
                    onPressRight={() => this.onNext()} onPressLeft={() => this.onPrev()}
                    customComponentTitle={
                        <View style={{width: this.props.labelWidth}}>
                            <RNPickerSelect
                                placeholder={{}}
                                items={this.props.items}
                                onValueChange={value => this.props.onValueChange(value)}
                                style={  pickerSelectStyles(this.props.fontColor)}
                                useNativeAndroidPickerStyle={false}
                                value={this.props.selectedItem}
                            />
                        </View>
                    }
            />
        )
    }
}

const pickerSelectStyles = (color) => StyleSheet.create({
    inputIOS: {
        fontSize: 16,
        color: color,
        fontWeight: 'bold',
        textAlign: 'center'
    },
    inputAndroid: {
        fontSize: 16,
        color: color,
        fontWeight: 'bold',
        textAlign: 'center'
    },
});

SelectHeader.propTypes = {
    selectedItem: PropTypes.string.isRequired,
    onValueChange: PropTypes.func.isRequired,
    selectItem: PropTypes.func.isRequired,
    items: PropTypes.array.isRequired,
    selectedIndex: PropTypes.number.isRequired,
    value: PropTypes.any.isRequired,
    labelWidth: PropTypes.number,

    backgroundColor: PropTypes.string,
    fontColor: PropTypes.string,
};

SelectHeader.defaultProps = {
    iconSize: 24,
    backgroundColor: '#404040',
    height: 45,
    iconColor: 'white',
    labelWidth: 100
};