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 Margin
 */
class Margin 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 mTop = settings.properties.marginTop
      ? settings.properties.marginTop
      : 0;

    const mTopOffset = value === "UP" ? mTop - 10 : mTop + 10;
    const newStyle = {
      marginTop: Number.isInteger(value) ? value : mTopOffset,
    };

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

    onChange();
  }

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

    return (
      <ButtonSliderGroup
        onChange={this.handleChange}
        text="Position"
        button1={{ icon: "keyboard_arrow_up", value: "UP" }}
        button2={{ icon: "keyboard_arrow_down", value: "DOWN" }}
        minValue={_.get(this.props, "minValue", -250)}
        maxValue={_.get(this.props, "maxValue", 250)}
        value={settings.properties.marginTop || 0}
      />
    );
  }
}

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

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

export default Margin;