import React, { Component, Fragment } from 'react'
import { string, func, bool, shape } from 'prop-types'
import { ChromePicker } from 'react-color'
import { Form, Input } from 'antd'
import './ColorPicker.less'

class ColorPicker extends Component {
  static propTypes = {
    color: string,
    onChange: func,
    onClose: func,
    onChangeComplete: func,
    onDisabledColorSelect: func,
    whiteDisabled: bool,
    label: string,
    pickerStyle: shape({})
  }

  state = {
    displayColorPicker: false,
    lastSelectedColor: this.props.color || '#02bf6f'
  }

  handleCloseColorPicker = () => {
    const { onClose } = this.props

    if (onClose) onClose()

    this.setState({
      displayColorPicker: false
    })
  }

  handleToggleColorPicker = () => {
    const { displayColorPicker } = this.state
    const { onClose } = this.props

    if (onClose && displayColorPicker) onClose()

    this.setState({
      displayColorPicker: !displayColorPicker
    })
  }

  handleOnChange = (selectedColor) => {
    const { lastSelectedColor } = this.state
    const { whiteDisabled, onDisabledColorSelect, onChange } = this.props

    if (whiteDisabled && selectedColor.hex === '#ffffff') {
      // reset to last selected color
      onChange(lastSelectedColor)
      this.setState({
        color: lastSelectedColor
      }, () => {
        if (onDisabledColorSelect) onDisabledColorSelect(lastSelectedColor)
      })

      return false
    }

    onChange(selectedColor.hex)

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

  handleOnChangeComplete = (selectedColor) => {
    const { onChangeComplete } = this.props

    this.setState({
      lastSelectedColor: selectedColor.hex
    }, () => {
      if (onChangeComplete) onChangeComplete(selectedColor.hex)
    })
  }

  renderColorPicker () {
    const { color, pickerStyle = {} } = this.props
    const { displayColorPicker } = this.state

    if (!displayColorPicker) return null

    return (
      <div className='color-picker-popover' style={pickerStyle}>
        <div className='color-picker-cover' onClick={this.handleCloseColorPicker} />
        <ChromePicker
          disableAlpha={true}
          color={color}
          onChange={this.handleOnChange}
          onChangeComplete={this.handleOnChangeComplete}
        />
      </div>
    )
  }

  render () {
    const { label, color } = this.props
    return (
      <Fragment>
        {this.renderColorPicker()}
        <Form.Item
          label={label}
        >
          <div
            onClick={this.handleToggleColorPicker}
            className='color-picker-container'
          >
            <Input
              readOnly
              addonBefore={
                <div
                  style={{ backgroundColor: color }}
                  className='color-picker-color'
                />
              }
              value={color}
            />
          </div>
        </Form.Item>
      </Fragment>
    )
  }
}

export default ColorPicker