import React, { useState } from 'react';
import {View , Text, TextInput, Button,StyleSheet} from 'react-native';
import { Icon } from 'react-native-elements'

export default class Alignment extends React.Component {
	constructor(props) {
		super(props);
	}

	getStyle(i) {
		switch(i) {
			case 0:
				return {
					alignItems: 'flex-start'
				} 
			case 1:
				return {
					alignItems: 'center'
				} 
			case 2:
				return {
					alignItems: 'flex-end'
				} 
			case 3:
				return {
					alignItems: 'stretch'
				} 
		}
	}
	set(i) {
		let style = this.getStyle(i);
		this.props.onSelect && this.props.onSelect(style);
	}
	render() {
		let iconStyle = styles.iconStyle;
		return (
			<View style={styles.container}>
				<Icon name="format-align-left" iconStyle={iconStyle} onClick={() => this.set(0)}/>
				<Icon name="format-align-center" iconStyle={iconStyle} onClick={() => this.set(1)}/>
				<Icon name="format-align-right" iconStyle={iconStyle} onClick={() => this.set(2)}/>
				<Icon name="format-align-justify" iconStyle={iconStyle} onClick={() => this.set(3)}/>
			</View>
		);
	}
}

const styles = StyleSheet.create({
	container:{
		padding:15,
		flexDirection: 'row',
		justifyContent: 'space-around',
		borderBottomColor: '#B4B4B4',
        borderBottomWidth: 1
	},
	defaultInput: {
		marginTop:6,
		borderWidth:1,
		width:200
	},
	title: {

	},
	iconStyle: {
		fontSize: 18,
		opacity: 0.6,
		cursor: 'pointer'
	}
})