import React, { Component } from 'react';
import { Card, CardSection, Button, Input } from './common';
import { connect } from 'react-redux';
import { Picker, Text } from 'react-native';
import { employeeUpdate } from '../actions';

class EmployeeCreate extends Component {
    render(){
        return (
                <Card>
                    <CardSection>
                        <Input
                            label="Name"
                            placeholder="Ashish"
                            value={this.props.name}
                            onChangeText={value => this.props.employeeUpdate({prop:'name', value})}
                        />


                    </CardSection>

                    <CardSection>
                        <Input
                            label="Phone"
                            placeholder="+91-8800545355"
                            value={this.props.phone}
                            onChangeText={value => this.props.employeeUpdate({prop:'phone', value})}
                        />
                    </CardSection>

                    <CardSection style={{ flexDirection: 'column'}}>
                        <Text style={styles.pickerTextStyle}>Shift</Text>
                        <Picker
                            style={{flex:1}}
                            selectedValue = {this.props.shift}
                            onValueChange={value => this.props.employeeUpdate({prop:'shift',value})}
                        >
                            <Picker.Item label="Monday" value="Monday" />
                            <Picker.Item label="Tuesday" value="Tuesday" />
                            <Picker.Item label="Wednesday" value="Wednesday" />
                            <Picker.Item label="Thursday" value="Thursday" />
                            <Picker.Item label="Friday" value="Friday" />
                            <Picker.Item label="Saturday" value="Saturday" />
                            <Picker.Item label="Sunday" value="Sunday" />
                        </Picker>
                    </CardSection>

                    <CardSection>
                        <Button>
                            Create
                        </Button>
                    </CardSection>
                </Card>
            );
    }
}

const styles = {
    pickerTextStyle: {
        fontSize: 18,
        paddingLeft: 20
    }
};

const mapStateToProps = (state) => {
    const { name, phone, shift } = state.employeeForm;

    return { name, phone, shift };
}

export default connect(mapStateToProps,{ employeeUpdate })(EmployeeCreate);

import React from 'react';
import { View } from 'react-native';

const CardSection = (props) => {

    return (
            <View style = {[styles.containerStyle, props.style]}>
                {props.children}
            </View>
        );
};

const styles = {
    containerStyle : {
        borderBottomWidth: 1,
        padding: 5,
        backgroundColor: '#fff',
        justifyContent: 'flex-start',
        flexDirection: 'row',
        borderColor: '#ddd',
        position: 'relative'
    }
};

export { CardSection};