import * as React from "react";
import { ButtonSliderGroup } from "../../groups";
import { ButtonSliderGroupProps } from "../../groups/ButtonSliderGroup/types";
import { isNumber } from "@sc/plugins/utilities";

interface HeightProps extends ButtonSliderGroupProps {
  /**
   * Triggered when the setting changes
   */
  onChange: (value: { height: React.ReactText }) => any;
}

/**
 * Creates a Button Slider Group to Change the Components Height
 */
const Height: React.FC<HeightProps> = (props) => {
  const { onChange } = props;

  const [value, setValue] = React.useState(props.value);

  const handleChange = (value, sliderValue) => {
    let height = sliderValue;

    if (!isNumber(value)) {
      switch (value) {
        case "GROW":
          height = sliderValue + 10;
          break;

        case "SHRINK":
          height = sliderValue - 10;
          break;
      }
    }

    setValue(height);
    onChange({ height });
  };

  return (
    <div data-testid="Properties-Height">
      <ButtonSliderGroup
        label="Height"
        {...props}
        value={value}
        onChange={handleChange}
      />
    </div>
  );
};

export default Height;