import React from 'react';
import { Popover } from 'antd';
import 'rc-color-picker/assets/index.css';
import { Panel as ColorPickerPanel } from 'rc-color-picker';
import { WeaInput } from 'ecCom';
import './style/index';

class WeaColorInput extends React.Component {
    constructor(props) {
        super(props);
        this.onChange = this.onChange.bind(this);
    }

    onChange(value) {
        this.props.onChange(value);
    }

    render() {
        const { color = '#000', layout } = this.props;

        return (
            <div className="portal-wea-ci">
                <Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@xwg3zu`}
                  content={
                        <ColorPickerPanel ecId={`${this && this.props && this.props.ecId || ''}_ColorPickerPanel@mmy7th`}
                          enableAlpha={false}
                          color={color}
                          onChange={obj => this.onChange(obj.color)}
                          mode="RGB"
                        />
                    }
                  trigger="click"
                  getTooltipContainer={() => layout || document.body}
                  overlayClassName="portal-wea-ci-popover"
                >
                    <div className="portal-wea-ci-btn" style={{ backgroundColor: color }} />
                </Popover>
                <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@zao5my`} value={color} onChange={this.onChange} />
            </div>
        );
    }
}

export default WeaColorInput;
