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 function ColorEditor(props) {


	/*let [number , setNumber] = useState(props.number || '')
	let title = props.title || "Input";*/

	let matches = rgbaTemplate.exec(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
	};
	console.log(matches);
	console.log(defaultColor);

	let [color, setColor] = useState(defaultColor);
	let title = props.title || "Input";
	return(
		<View style={styles.container}>
			<Text> Color Picker </Text>
	 		<SketchPicker 
	 		color={color}
	 		width="180px" onChangeComplete ={(newColor) => {
		 		props.onChange && props.onChange(`rgba(${newColor.rgb.r},${newColor.rgb.g},${newColor.rgb.b},${newColor.rgb.a})`);
				setColor(newColor.rgb);
			}}
			/>
		 		
		</View>
		)

}

const styles = StyleSheet.create({
	container:{
		padding:10
	},
	defaultInput: {
		marginTop:6,
		borderWidth:1,
		width:100
	},
	title: {

	}
})