'use strict';

exports.__esModule = true;
exports.ColorInput = undefined;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _recompose = require('recompose');

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _grommet = require('grommet');

var _grommetIcons = require('grommet-icons');

var _hocs = require('grommet/components/hocs');

var _MaskedInput = require('../MaskedInput');

var _Colors = require('../Colors');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var StyledColorButton = _styledComponents2.default.span.withConfig({
  displayName: 'ColorInput__StyledColorButton',
  componentId: 'sc-1g5trqd-0'
})(['display:inline-flex;svg{border:', ';fill:', ';stroke:', ';transition:none;}'], function (props) {
  return props.theme.button.border.width + ' solid ' + props.theme.global.colors.border;
}, function (props) {
  return props.selectedColor;
}, function (props) {
  return props.selectedColor;
});

var ColorInput = function (_Component) {
  _inherits(ColorInput, _Component);

  function ColorInput(props) {
    _classCallCheck(this, ColorInput);

    var _this = _possibleConstructorReturn(this, _Component.call(this, props));

    _this.onChange = function (e) {
      var onChange = _this.props.onChange;

      _this.setState({ selectedColor: e.target.value });
      if (onChange) {
        onChange(e);
      }
    };

    _this.onSelect = function (_ref) {
      var color = _ref.color;

      _this.setState({ selectedColor: color });
      _this.upDateValue(color);
    };

    _this.state = { selectedColor: props.value || props.defaultValue };
    return _this;
  }

  ColorInput.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
    var value = nextProps.value;

    if (value !== this.props.value) {
      this.setState({ selectedColor: value });
    }
  };

  ColorInput.prototype.render = function render() {
    var _this2 = this;

    var _props = this.props,
        columns = _props.columns,
        wrap = _props.wrap,
        theme = _props.theme,
        colors = _props.colors,
        size = _props.size,
        rest = _objectWithoutProperties(_props, ['columns', 'wrap', 'theme', 'colors', 'size']);

    var selectedColor = this.state.selectedColor;

    return _react2.default.createElement(_MaskedInput.MaskedInput, _extends({
      update: function update(_update) {
        _this2.upDateValue = _update;
      },
      dropIcon: _react2.default.createElement(
        StyledColorButton,
        { theme: theme, selectedColor: selectedColor },
        _react2.default.createElement(_grommetIcons.StopFill, null)
      ),
      dropContent: _react2.default.createElement(
        _grommet.Box,
        { pad: 'small' },
        _react2.default.createElement(_Colors.Colors, {
          color: selectedColor,
          colors: colors,
          onSelect: this.onSelect,
          columns: columns,
          wrap: wrap,
          size: size
        })
      ),
      onChange: this.onChange
    }, rest));
  };

  return ColorInput;
}(_react.Component);

ColorInput.defaultProps = {
  size: 'small',
  mask: ['#', /[0-9a-fA-F]/, /[0-9a-fA-F]/, /[0-9a-fA-F]/, /[0-9a-fA-F]/, /[0-9a-fA-F]/, /[0-9a-fA-F]/]
};


var ColorInputDoc = void 0;
if (process.env.NODE_ENV !== 'production') {
  ColorInputDoc = require('./doc').default(ColorInput); // eslint-disable-line global-require
}

var ColorInputWrapper = (0, _recompose.compose)(_hocs.withTheme)(ColorInputDoc || ColorInput);

exports.ColorInput = ColorInputWrapper;