"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _reactSelect = _interopRequireDefault(require("react-select"));

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

var _selectStyles = _interopRequireDefault(require("../../../styles/select-styles"));

var _designSystem = require("../../design-system");

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

class Edit extends _react.default.Component {
  constructor(props) {
    super(props);
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleSelectChange = this.handleSelectChange.bind(this);
  }

  handleInputChange(event) {
    const {
      onChange,
      property
    } = this.props;
    onChange(property.name, event.target.value);
  }

  handleSelectChange(selected) {
    const {
      onChange,
      property
    } = this.props;
    const value = selected ? selected.value : '';
    onChange(property.name, value);
  }

  renderInput() {
    const {
      property,
      record,
      theme
    } = this.props;
    const value = record.params && typeof record.params[property.name] !== 'undefined' ? record.params[property.name] : '';

    if (property.availableValues) {
      const styles = (0, _selectStyles.default)(theme);
      const selected = property.availableValues.find(av => av.value === value);
      return _react.default.createElement(_reactSelect.default, {
        isClearable: true,
        styles: styles,
        value: selected,
        options: property.availableValues,
        onChange: this.handleSelectChange,
        isDisabled: property.isDisabled
      });
    }

    return _react.default.createElement(_designSystem.Input, {
      id: property.name,
      name: property.name,
      onChange: this.handleInputChange,
      value: value,
      disabled: property.isDisabled
    });
  }

  render() {
    const {
      property,
      record
    } = this.props;
    const error = record.errors && record.errors[property.name];
    return _react.default.createElement(_designSystem.FormGroup, {
      error: !!error
    }, _react.default.createElement(_designSystem.Label, {
      htmlFor: property.name
    }, property.label), this.renderInput(), _react.default.createElement(_designSystem.FormMessage, null, error && error.message));
  }

}

var _default = (0, _styledComponents.withTheme)(Edit);

exports.default = _default;