import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import * as React from 'react';
import "./index.scss";
var SelectImgSetter = /*#__PURE__*/function (_React$PureComponent) {
  _inheritsLoose(SelectImgSetter, _React$PureComponent);
  function SelectImgSetter() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
    _this.state = {
      isFocus: false
    };
    return _this;
  }
  var _proto = SelectImgSetter.prototype;
  _proto.render = function render() {
    var _this2 = this;
    var _this$props = this.props,
      value = _this$props.value,
      options = _this$props.options,
      onChange = _this$props.onChange;
    var setFocusStatus = function setFocusStatus(status) {
      return _this2.setState({
        isFocus: status
      });
    };
    var activeStyle = {
      boxShadow: '0 0 1px 0.25px #5583ff inset',
      backgroundColor: '#edf3fc'
    };
    var focusFn = function focusFn(val) {
      return val ? setFocusStatus(val) : setTimeout(function () {
        return setFocusStatus(val);
      }, 300);
    };
    var styleFn = function styleFn(style, active) {
      return active ? Object.assign(activeStyle, style) : style;
    };
    return /*#__PURE__*/React.createElement("div", {
      className: "select-img-setter"
    }, /*#__PURE__*/React.createElement("div", {
      className: "img-box select-img-show",
      style: {
        backgroundImage: "url(" + value + "?imageMogr2/interlace/1)"
      }
    }, /*#__PURE__*/React.createElement("input", {
      type: "text",
      onFocus: function onFocus() {
        return focusFn(true);
      },
      onBlur: function onBlur() {
        return focusFn(false);
      },
      className: "select-img-focus"
    })), /*#__PURE__*/React.createElement("div", {
      className: "select-img-list " + (this.state.isFocus ? 'select-img-list-show' : '')
    }, options.map(function (res, idx) {
      return /*#__PURE__*/React.createElement("div", {
        className: "img-box select-img-list-item",
        key: idx + res,
        onClick: function onClick() {
          return onChange(res);
        },
        style: styleFn({
          backgroundImage: "url(" + res + "?imageMogr2/interlace/1)"
        }, value === res)
      });
    })));
  };
  return SelectImgSetter;
}(React.PureComponent);
SelectImgSetter.displayName = 'SelectImgSetter';
export { SelectImgSetter as default };