import React, { Component } from 'react'
import { Col, Row, Select } from 'antd'
import { ChromePicker } from 'react-color'

export default class index extends Component {
    select = React.createRef()

    state = {
        color: null,
    }

    onChange(color) {
        this.setState({ color: color.hex })
    }

    onChangeComplete(color) {
        this.props.onChange && this.props.onChange(color.hex)
    }

    render() {
        const { color } = this.state

        const { value } = this.props

        return (
            <Row gutter={8}>
                <Col flex="1">
                    <Select
                        ref={this.select}
                        dropdownRender={() => (
                            <ChromePicker
                                color={color || value || '#000'}
                                disableAlpha
                                onChange={color => this.onChange(color)}
                                onChangeComplete={color => this.onChangeComplete(color)}
                            />
                        )}
                        showArrow={false}
                        {...this.props}
                        value={value}
                    />
                </Col>
                <Col flex="32px">
                    <div
                        className="color-selector--palette"
                        style={{ backgroundColor: color || value || '#000' }}
                        onClick={() => {
                            this.select.current.focus()
                        }}
                    ></div>
                </Col>
            </Row>
        )
    }
}
