import * as React from 'react';
import styled from 'styled-components';
import AbstractButton from '../AbstractButton/AbstractButton';
import AbstractInput from '../AbstractInput/AbstractInput';
import ValidationState from '../../enums/ValidationState';
const { ChromePicker } = require('react-color');
export { ValidationState };
const Button = styled(AbstractButton) `
  box-sizing: border-box;
  display: block;
  width: 4em;
  height: 2em;
  box-shadow: 0 0 0 .25em white, rgba(0,0,0,0.2) .15em .075em 3px 3px;
  border-radius: 0.25em;
  &:active:focus {
    outline: none;
  }
`;
const Cover = styled.div `
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
`;
const Popover = styled.div `
  position: absolute;
  z-index: 2;
  margin-top: 0.5em;
`;
export class ColorInput extends React.Component {
    constructor() {
        super(...arguments);
        this._lastToggle = Date.now();
        this.state = { displayColorPicker: false };
        this._onClick = (e) => {
            this.setState(s => ({ displayColorPicker: !s.displayColorPicker }));
        };
        this._onHide = (e) => {
            this.setState({ displayColorPicker: false });
        };
        this._onChange = (color) => {
            this.props.onChange({ name: this.props.name, value: color.hex });
        };
        this._renderInput = ({ focused, labelMode, validationMessage, validationState, onFocus, onBlur, }) => {
            return (<div>
        <Button style={{ background: this.props.value }} onClick={this._onClick}>
          {' '}
        </Button>
        {this.state.displayColorPicker
                ? <Popover>
              <Cover onClick={this._onHide}/>
              <ChromePicker type="button" color={this.props.value} disableAlpha={this.props.disableAlpha} onChangeComplete={this._onChange}/>
            </Popover>
                : null}
      </div>);
        };
    }
    render() {
        // We use a div to disable the slightly odd behaviour that mouse
        // clicks exhibit when inside labels
        return (<AbstractInput formGroupComponent="div" inputContainerStyle={this.props.inputContainerStyle} label={this.props.label} labelMode={this.props.labelMode} labelStyle={this.props.labelStyle} required={this.props.required} validationMessage={this.props.validationMessage} validationState={this.props.validationState || ValidationState.Hidden} renderInput={this._renderInput} onFocus={this.props.onFocus} onBlur={this.props.onBlur}/>);
    }
}
export default ColorInput;