import { setComponentTemplate } from '@ember/component';
import { precompileTemplate } from '@ember/template-compilation';
import Component from '@glimmer/component';
import { on } from '@ember/modifier';
import { htmlSafe } from '@ember/template';
import optional from 'ember-composable-helpers/helpers/optional';
import { eq } from 'ember-truth-helpers';
import classNames from '../helpers/class-names.js';
import getRangeTick from '../helpers/get-range-tick.js';

class EuiRangeTicksComponent extends Component {
  get percentageWidth() {
    const {
      max,
      min,
      interval = 1
    } = this.args;
    return interval / (max - min + interval) * 100;
  }
  get ticksStyle() {
    const {
      ticks
    } = this.args;
    return !ticks ? undefined : htmlSafe(`margin: 0 ${this.percentageWidth / -2}%; left: 0; right: 0;`);
  }
  get trackWidth() {
    return this.args.trackWidth || 0;
  }
}
setComponentTemplate(precompileTemplate(`
    <div
      class="euiRangeTicks {{if @compressed 'euiRangeTicks--compressed'}}"
      style={{this.ticksStyle}}
      ...attributes
    >
      {{#each @tickSequence key="value" as |tickValue|}}
        {{#let
          (getRangeTick
            @ticks tickValue @min @max this.percentageWidth this.trackWidth
          )
          as |derivedState|
        }}
          <button
            type="button"
            class={{classNames
              (if (eq @value tickValue) "euiRangeTick--selected")
              (if derivedState.customTick "euiRangeTick--isCustom")
              "euiRangeTick"
            }}
            value={{tickValue}}
            disabled={{@disabled}}
            style={{derivedState.style}}
            tabindex="-1"
            {{on "click" (optional @onChange)}}
          >
            {{!@glint-expect-error}}
            {{derivedState.label}}
          </button>
        {{/let}}
      {{/each}}
    </div>
  `, {
  strictMode: true,
  scope: () => ({
    getRangeTick,
    classNames,
    eq,
    on,
    optional
  })
}), EuiRangeTicksComponent);

export { EuiRangeTicksComponent as default };
//# sourceMappingURL=eui-range-ticks.js.map
