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 'flex-start'
			case 1: return 'center'
			case 2: return 'flex-end'
			case 3: return 'stretch' 
			case 4: return 'space-around' 
			case 5: return 'space-between' 
			case 6: return 'baseline'
		}
	}

	set(i) {
		let style = { alignItems: this.getStyle(i) };
		this.props.onSelect && this.props.onSelect(style)
	}
	justify(i) {
		let style = { justifyContent: this.getStyle(i) };
		this.props.onSelect && this.props.onSelect(style)
	}
	alignSelf(i) {
		let style = { alignSelf: this.getStyle(i) };
		this.props.onSelect && this.props.onSelect(style)
	}

	render() {
		let iconStyle = styles.iconStyle;
		return ([
			<View style={styles.container} key={'align'}>
				<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>,

			<View style={styles.container} key={'justify'}>
				<Icon name="vertical-align-top" iconStyle={iconStyle} onClick={() => this.justify(0)}/>
				<Icon name="vertical-align-center" iconStyle={iconStyle} onClick={() => this.justify(1)}/>
				<Icon name="vertical-align-bottom" iconStyle={iconStyle} onClick={() => this.justify(2)}/>
				<Icon name="toc" iconStyle={iconStyle} onClick={() => this.justify(4)}/>
				<Icon name="view-headline" iconStyle={iconStyle} onClick={() => this.justify(5)}/>
			</View>,

			<View style={styles.container} key={'alignSelf'}>
				<Icon name="vertical-align-top" iconStyle={iconStyle} onClick={() => this.alignSelf(0)}/>
				<Icon name="vertical-align-center" iconStyle={iconStyle} onClick={() => this.alignSelf(1)}/>
				<Icon name="vertical-align-bottom" iconStyle={iconStyle} onClick={() => this.alignSelf(2)}/>
				<Icon name="toc" iconStyle={iconStyle} onClick={() => this.alignSelf(3)}/>
				<Icon name="view-headline" iconStyle={iconStyle} onClick={() => this.alignSelf(6)}/>
			</View>
			]
		);
	}
}

const styles = StyleSheet.create({
	container:{
		padding:10,
		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'
	}
})