import React from "react";
import { SLIDER_NORM_WIDTH, SLIDER_SMALL_WIDTH } from "../constants/constants";
import UncontrolledSliderWithPlusMinusBtns from "../helperComponents/UncontrolledSliderWithPlusMinusBtns";
import { scrollToCaret } from "./index";
export function ZoomLinearView(_ref) {
  var setCharWidth = _ref.setCharWidth,
    minCharWidth = _ref.minCharWidth,
    bindOutsideChangeHelper = _ref.bindOutsideChangeHelper,
    afterOnChange = _ref.afterOnChange,
    smallSlider = _ref.smallSlider;
  return /*#__PURE__*/React.createElement("div", {
    className: "tg-zoom-bar",
    style: {
      zIndex: 900,
      position: "absolute"
    }
  }, /*#__PURE__*/React.createElement(UncontrolledSliderWithPlusMinusBtns, {
    noWraparound: true,
    bindOutsideChangeHelper: bindOutsideChangeHelper,
    onClick: function onClick() {
      setTimeout(scrollToCaret, 0);
    },
    onChange: function onChange(zoomLvl) {
      //zoomLvl is in the range of 0 to 10
      var scaleFactor = Math.pow(12 / minCharWidth, 1 / 10);
      var newCharWidth = minCharWidth * Math.pow(scaleFactor, zoomLvl);
      setCharWidth(newCharWidth);
      scrollToCaret();
      afterOnChange && afterOnChange();
    },
    leftIcon: "minus",
    rightIcon: "plus",
    title: "Zoom",
    smallSlider: true,
    style: {
      paddingTop: "4px",
      width: smallSlider ? SLIDER_SMALL_WIDTH : SLIDER_NORM_WIDTH
    },
    className: "veZoomLinearSlider ove-slider",
    labelRenderer: false,
    stepSize: 0.05,
    clickStepSize: 0.5,
    initialValue: 0,
    max: 10,
    min: 0
  }));
}