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

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

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

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

    const height = settings.properties.height ? settings.properties.height : 0;
    const newHeight =
      height === "auto" || !height ? objCoordinates.height : height;

    const heightOffset = value === "SHRINK" ? newHeight - 10 : newHeight + 10;

    const newStyle = value
      ? {
          height: Number.isInteger(value) ? value : heightOffset,
          overflow: "visible",
        }
      : {
          height: "auto",
          overflow: "visible",
        };

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

    onChange();
  }

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

    let autoCheckValue = true;
    if (settings.properties.hasOwnProperty("height")) {
      if (
        Number.isInteger(settings.properties.height) ||
        settings.properties.height === "100%"
      ) {
        autoCheckValue = false;
      }
    }

    return (
      <ButtonSliderGroup
        showAutoCheck
        {...this.props}
        onChange={this.handleChange}
        text={get(this.props, "heightLabel", false) || "Height"}
        button1={{ icon: "remove", value: "SHRINK" }}
        button2={{ icon: "add", value: "GROW" }}
        minValue={10}
        maxValue={this.props.parentCoordinates.height || 1000}
        value={
          settings.properties.height || this.props.objCoordinates.height || 0
        }
        originalValue={this.props.objCoordinates.height}
        autoCheckValue={autoCheckValue}
      />
    );
  }
}

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

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

export default Height;