"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _option = _interopRequireDefault(require("./_option"));
var _fieldSetting = _interopRequireDefault(require("./field-setting"));
require("./style.css");
class Select extends _react.default.Component {
  constructor(props) {
    super(props);
    (0, _defineProperty2.default)(this, "handleSelector", event => {
      if (this.selector && !this.selector.contains(event.target)) {
        this.setState({
          isShowSelector: false
        });
      }
    });
    (0, _defineProperty2.default)(this, "getCurrentOption", () => {
      const {
        value,
        options
      } = this.props;
      const currentOption = value && options.find(option => option.value === value.value);
      return currentOption;
    });
    (0, _defineProperty2.default)(this, "onSelectToggle", event => {
      const {
        isShowSelector
      } = this.state;
      const newValue = !isShowSelector;
      if (newValue) {
        this.dropdownContainerHasInit = false;
      }
      this.setState({
        isShowSelector: newValue
      });
    });
    (0, _defineProperty2.default)(this, "onChange", option => {
      this.setState({
        isShowSelector: false,
        currentOption: option
      });
      this.props.onChange(option);
    });
    (0, _defineProperty2.default)(this, "onUpdateOption", option => {
      this.setState({
        currentOption: option
      });
      this.props.onChange(option);
    });
    (0, _defineProperty2.default)(this, "setContainerRef", ref => {
      this.dropdownContainer = ref;
    });
    (0, _defineProperty2.default)(this, "setSelectorRef", ref => {
      this.selector = ref;
    });
    this.state = {
      isShowSelector: false,
      currentOption: this.getCurrentOption()
    };
    this.dropdownContainerHasInit = false;
  }
  componentDidMount() {
    document.addEventListener('mousedown', this.handleSelector);
  }
  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleSelector);
  }
  componentDidUpdate() {
    const {
      options
    } = this.props;
    const {
      currentOption
    } = this.state;
    const activeIndex = currentOption && options.findIndex(option => option.value === currentOption.value);
    if (activeIndex > -1) {
      const scrollTop = 48 + (activeIndex + 1) * 32 - 150;
      if (scrollTop < 0) return;
      if (this.dropdownContainer && !this.dropdownContainerHasInit) {
        this.dropdownContainerHasInit = true;
        this.dropdownContainer.scrollTop = scrollTop;
      }
    }
  }
  render() {
    const {
      selectClass,
      optionClass,
      isSelected,
      options,
      placeholder
    } = this.props;
    const {
      currentOption,
      isShowSelector
    } = this.state;
    const isActive = isShowSelector || isSelected;
    return /*#__PURE__*/_react.default.createElement("span", {
      ref: this.setSelectorRef,
      className: `select-container ${selectClass || ''}`
    }, /*#__PURE__*/_react.default.createElement("span", {
      className: `control-container ${isActive ? 'active' : ''}`,
      onClick: this.onSelectToggle
    }, !currentOption && /*#__PURE__*/_react.default.createElement("span", {
      className: "label placeholder-content"
    }, placeholder), currentOption && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
      className: `control-icon ${currentOption.iconClass}`
    }), /*#__PURE__*/_react.default.createElement("span", {
      className: "control-label"
    }, currentOption.label)), /*#__PURE__*/_react.default.createElement("span", {
      className: "operation"
    }, /*#__PURE__*/_react.default.createElement("i", {
      className: "iconfont icon-drop-down arrow"
    }))), isShowSelector && /*#__PURE__*/_react.default.createElement("span", {
      className: "select-popover"
    }, /*#__PURE__*/_react.default.createElement(_fieldSetting.default, {
      option: currentOption,
      onUpdateOption: this.onUpdateOption
    }), /*#__PURE__*/_react.default.createElement("span", {
      className: "option-item-divider"
    }), /*#__PURE__*/_react.default.createElement("span", {
      className: "option-item-wrapper",
      ref: this.setContainerRef
    }, options.map(option => {
      const isActive = option.value === (currentOption && currentOption.value);
      return /*#__PURE__*/_react.default.createElement(_option.default, {
        key: option.value,
        optionClass: optionClass,
        isActive: isActive,
        option: option,
        onOptionChanged: this.onChange
      });
    }))));
  }
}
var _default = exports.default = Select;