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";

	let open = this.state.open ? (
			<View style={styles.container}>
				<View style={styles.prevCont}>
					<Text> Color Fill </Text>
		 			<View onClick = {(e) => this.setState({open:false})} style={[{backgroundColor:this.props.text},styles.preview]}></View>
		 		</View>
		 		<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});
				}}
				/>
			</View>
			):(
			<View key={Math.random()} style={styles.prevCont}>
				<Text>Color Fill</Text>
				<View onClick = {(e) => this.setState({open:true})} style={[{backgroundColor:this.props.text},styles.preview]}></View>
			</View>
			)
	return(
			<View>
			<Text>{this.props.title}</Text>
			{open}
			</View>
			
		)


		
		
		
	}
}

const styles = StyleSheet.create({
	container:{
		padding:10
	},
	defaultInput: {
		marginTop:6,
		borderWidth:1,
		width:100
	},
	prevCont:{
		flex:1,
		flexDirection:'row'	
	},
	preview:{
		width: 43,
		height: 19,
		boxShadow: '0px 3px 6px #00000029',
		border: '1px solid #FFFFFF',
		borderRadius: 14,
		opacity: 1
	}
})