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

let rgbaTemplate = /rgba\([ ]*([0-9.]+)[ ]*,[ ]*([0-9.]+)[ ]*,[ ]*([0-9.]+)[ ]*,[ ]*([0-9.]+)[ ]*\)/;
export default class ColorEditor extends React.Component {
	constructor(props){
		super(props)
		this.state = {
			open:false
		}
	}
	
	render(){
	let matches = rgbaTemplate.exec(this.props.text || '');
	let defaultColor = {
		r: matches && parseFloat(matches[1]) || 0,
		g: matches && parseFloat(matches)[2] || 0,
		b: matches && parseFloat(matches)[3] || 0,
		a: matches && parseFloat(matches)[4] || 1
	};

	let color = this.state.color || defaultColor;
	let title = this.props.title || "Input";

	return	<View style={styles.container}>
				<View style={styles.prevCont}>
					<Text style={styles.capFirst}>{title}</Text>
		 			<View onClick = {(e) => this.setState({open:!this.state.open})} style={[{backgroundColor:this.props.text},styles.preview]}></View>
		 		</View>
		 		{this.state.open ? <SketchPicker 
		 		color={color}
		 		width="180px" onChangeComplete ={(newColor) => {
			 		this.props.onChange && this.props.onChange(`rgba(${newColor.rgb.r},${newColor.rgb.g},${newColor.rgb.b},${newColor.rgb.a})`);
					this.setState({color:newColor.rgb});
				}} 
				/> : null}
			</View>
	}
}

const styles = StyleSheet.create({
	container:{
		padding:24,
		paddingTop: 0
	},
	defaultInput: {
		marginTop:6,
		// borderWidth:1,
		width:100
	},
	capFirst: {
		fontSize: 14, 
		fontFamily: 'roboto-light',
		textTransform: 'capitalize'
	},
	prevCont:{
		flex:1,
		flexDirection:'row',
		justifyContent: 'space-between',
		alignItems: 'baseline'		
	},
	preview:{
		width: 43,
		height: 19,
		cursor: 'pointer',
		boxShadow: '0px 3px 6px #00000029',
		borderColor: '#FFFFFF66',
		borderWidth: 1,
		borderRadius: 14,
		opacity: 1
	}
})