import React, { Component } from "react";
import { ButtonSliderGroup } from "..";

class LineHeight extends Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(value, dbUpdate = true, wait = 500) {
    const { settings, updateComponentStyle } = this.props;
    // if (value === 11) alert(`About to trigger updateComponentStyle, ${value}`);

    const lineHeight = settings.properties.lineHeight
      ? Number(settings.properties.lineHeight.replace("px", ""))
      : 12;

    console.log({ lineHeight }, settings.properties.lineHeight);

    let lhOffset;
    if (value === "SHRINK") lhOffset = lineHeight - 2;
    else if (value === "GROW") lhOffset = lineHeight + 2;

    const newStyle = {
      lineHeight: Number.isInteger(value) ? `${value}px` : `${lhOffset}px`,
    };

    console.log({ lhOffset }, { value }, { lineHeight });

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

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

    const lineHeight = settings.properties.lineHeight
      ? settings.properties.lineHeight.replace("px", "")
      : 12;

    return (
      <ButtonSliderGroup
        {...this.props}
        onChange={this.handleChange}
        text="Line Height"
        button1={{ icon: "remove", value: "SHRINK" }}
        button2={{ icon: "add", value: "GROW" }}
        minValue={8}
        maxValue={100}
        value={lineHeight}
      />
    );
  }
}

export default LineHeight;