import * as React from 'react';
import { ChromePicker, ColorChangeHandler, RGBColor } from 'react-color';
import Popover from '@material-ui/core/Popover';
import pickerImage from '../../../../../examples/public/images/color-picker2.png';

class ColorPicker extends React.Component{
  anchorEl: HTMLElement;
  constructor(props){
    super(props);
    this.state = {
      showColorPicker: false,
    }
    this.fontColorFlag = true;         
  }

  handleClickShowColorPicker = (e: React.MouseEvent<HTMLElement>) => {
    console.log("Binesh kumar")
    this.setState({
      showColorPicker: !this.state.showColorPicker  
    })
  }

  onChange: ColorChangeHandler = e => {
    this.fontColorFlag = false;
    this.setState({selectedColor:e.hex})
    if(this.props.onColorChange){
      this.props.onColorChange(e.hex)
    }
  }

  render(){
    const { selectedColor } = this.state;
    const {fontColor} = this.props;
    let fontColorVal = selectedColor;
    if(this.fontColorFlag) {
      fontColorVal = fontColor;
    }

    return(
      <>
				<div onClick={this.handleClickShowColorPicker} className="color-picker-container" >
          <div className="color-picker-placeholder" style={{backgroundColor:fontColorVal}}></div>
          <div className="color-picker-image">
            <img src={pickerImage} />
          </div>
				</div>
				<Popover
					open={this.state.showColorPicker}
					anchorOrigin={{
						vertical: 'top',
						horizontal: 'right',
					}}
					transformOrigin={{
						vertical: 'bottom',
						horizontal: 'center',
					}}
					className="ory-prevent-blur"
				  anchorEl={this.anchorEl}
				  onClose={this.handleClickShowColorPicker}
				>
          <div className='ory-prevent-blur'>
            <ChromePicker
              color={'white'}
              onChange={this.onChange}
              onChangeComplete={this.handleChangeComplete}
            />
          </div>
        </Popover>
      </>
    )
  }
}
export default ColorPicker;