import React, { useMemo } from 'react';
import { useThresholdColor } from './useThresholdColor';
import { StyledLabel } from './partials/StyledLabel';
import { StyledMarker } from './partials/StyledMarker';
function isActive(values, tickValue, tracksLeft, tracksRight) {
  if (!tracksLeft && !tracksRight) {
    return tickValue >= values[0] && tickValue <= values[1];
  }
  if (tracksLeft && tracksRight) {
    return true;
  }
  return values.some(function (item) {
    return tickValue <= item;
  });
}
export var Tick = function Tick(_ref) {
  var tick = _ref.tick,
    count = _ref.count,
    hasLabels = _ref.hasLabels,
    hasMarkers = _ref.hasMarkers,
    values = _ref.values,
    domain = _ref.domain,
    isReversed = _ref.isReversed,
    thresholds = _ref.thresholds,
    _ref$tracksLeft = _ref.tracksLeft,
    tracksLeft = _ref$tracksLeft === void 0 ? false : _ref$tracksLeft,
    _ref$tracksRight = _ref.tracksRight,
    tracksRight = _ref$tracksRight === void 0 ? false : _ref$tracksRight;
  var percent = useMemo(function () {
    return isReversed ? 100 - tick.percent : tick.percent;
  }, [tick.percent, isReversed]); // invert if reversed

  var tickValue = useMemo(function () {
    return domain[1] / 100 * percent;
  }, [domain, percent]);
  var thresholdColor = useThresholdColor(percent, thresholds);
  var showMarker = percent === 0 || percent === 100 || hasMarkers;
  return /*#__PURE__*/React.createElement("div", null, showMarker && /*#__PURE__*/React.createElement(StyledMarker, {
    $left: "".concat(tick.percent, "%"),
    $isActive: isActive(values, tickValue, tracksLeft, tracksRight),
    $thresholdColor: thresholdColor
  }), hasLabels && /*#__PURE__*/React.createElement(StyledLabel, {
    $marginLeft: "".concat(-(100 / count) / 2, "%"),
    $width: "".concat(100 / count, "%"),
    $left: "".concat(tick.percent, "%")
  }, tick.value));
};
Tick.displayName = 'Tick';