import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import * as React from 'react';
import "./index.scss";
import global from "../../utils/global";
var SelectImgSetter = /*#__PURE__*/function (_React$PureComponent) {
  _inheritsLoose(SelectImgSetter, _React$PureComponent);
  function SelectImgSetter(props) {
    var _this;
    _this = _React$PureComponent.call(this, props) || this;
    _this.state = {
      isFocus: false,
      initImgValue: "",
      imgOptions: []
    };
    return _this;
  }
  var _proto = SelectImgSetter.prototype;
  _proto.componentDidMount = function componentDidMount() {
    global.liveCode.logoImg = this.props.value;
    // console.log("global.liveCode.logoImg", global.liveCode.logoImg)
  };
  _proto.render = function render() {
    var _this2 = this;
    // const { value, options, onChange, id, field } = this.props;
    var onChange = this.props.onChange;
    // console.log(value, options, id)
    var selectimg = function selectimg() {
      renderLogoImg(global.liveCode.logoImg);
    };
    var renderLogoImg = function renderLogoImg(x) {
      var arr = [];
      arr.push({
        src: x
      });
      _this2.setState({
        imgOptions: arr
      });
    };
    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) {
      val ? setFocusStatus(val) : setTimeout(function () {
        return setFocusStatus(val);
      }, 300);
      if (val === true) {
        selectimg();
      }
    };
    var styleFn = function styleFn(style, active) {
      _this2.setState({
        initImgValue: 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(" + this.state.initImgValue + ")"
      }
    }, /*#__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' : '')
    }, this.state.imgOptions.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.src);
        },
        style: styleFn({
          backgroundImage: "url(" + res.src + ")"
        }, res.src)
      });
    })));
  };
  return SelectImgSetter;
}(React.PureComponent);
SelectImgSetter.displayName = 'SelectImgSetter';
export { SelectImgSetter as default };