import _ from "lodash";
import PropTypes from "prop-types";
import React, { Component } from "react";
import ButtonSliderGroup from "../BuildingBlocks/ButtonSliderGroup";

/**
 * Creates a Button Slider Group to Change the Components Padding
 */
class Spacing extends Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(value, dbUpdate = true, wait = 500) {
    const { updateComponentStyle, onChange, settings } = this.props;

    const margin = settings.properties.margin ? settings.properties.margin : 0;

    const marginOffset = value === "SHRINK" ? margin - 5 : margin + 5;
    const newStyle = {
      margin: Number.isInteger(value) ? value : marginOffset
    };

    updateComponentStyle(settings.id, newStyle, dbUpdate, false);

    onChange();
  }

  render() {
    const { settings } = this.props;

    return (
      <ButtonSliderGroup
        onChange={this.handleChange}
        text="Spacing"
        button1={{ icon: "remove", value: "SHRINK" }}
        button2={{ icon: "add", value: "GROW" }}
        minValue={_.get(this.props, "minValue", 0)}
        maxValue={_.get(this.props, "maxValue", 100)}
        value={_.get(settings, "properties.padding", 0)}
      />
    );
  }
}

Spacing.propTypes = {
  onChange: PropTypes.func,
  updateComponentStyle: PropTypes.func.isRequired
};

Spacing.defaultProps = {
  onChange: () => false
};

export default Spacing;