import React from 'react';
import styled from 'styled-components';
import { IconBrightnessLow, IconBrightnessHigh } from '@defencedigital/icon-library';
import { storyAccessibilityConfig } from '../../a11y/storyAccessibilityConfig';
import { RangeSlider } from './index';
export default {
  component: RangeSlider,
  title: 'Range Slider',
  parameters: {
    actions: {
      argTypesRegex: '^on.*'
    },
    a11y: {
      config: {
        rules: storyAccessibilityConfig['Range Slider']
      }
    }
  }
};
var StyledWrapper = styled.div.withConfig({
  displayName: "RangeSliderstories__StyledWrapper",
  componentId: "sc-1tsttj3-0"
})(["display:flex;height:5rem;padding:0 1.5rem;"]);
var Template = function Template(props) {
  return /*#__PURE__*/React.createElement(StyledWrapper, null, /*#__PURE__*/React.createElement(RangeSlider, props));
};
export var Default = Template.bind({});
Default.args = {
  domain: [0, 40],
  mode: 1,
  values: [20],
  tracksLeft: true
};
export var MultipleHandles = Template.bind({});
MultipleHandles.args = {
  domain: [0, 40],
  mode: 2,
  values: [10, 30],
  step: 1,
  tickCount: 10,
  hasMarkers: true,
  displayUnit: 'pt'
};
MultipleHandles.storyName = 'Multiple handles';
export var SingleThreshold = Template.bind({});
SingleThreshold.args = {
  domain: [0, 40],
  mode: 1,
  values: [30],
  tracksLeft: true,
  hasMarkers: true,
  thresholds: [40]
};
SingleThreshold.storyName = 'Single threshold';
export var DoubleThreshold = Template.bind({});
DoubleThreshold.args = {
  domain: [0, 40],
  mode: 1,
  values: [30],
  tracksLeft: true,
  hasMarkers: true,
  thresholds: [40, 60]
};
DoubleThreshold.storyName = 'Double threshold';
export var CustomValueFormatter = Template.bind({});
CustomValueFormatter.args = {
  domain: [0, 40],
  mode: 1,
  values: [20],
  tickCount: 4,
  tracksLeft: true,
  hasMarkers: true,
  formatValue: function formatValue(_ref) {
    var value = _ref.value;
    return "\xA3".concat(value.toFixed(2));
  }
};
CustomValueFormatter.storyName = 'Custom value formatter';
export var Stepped = Template.bind({});
Stepped.args = {
  domain: [0, 40],
  step: 10,
  mode: 1,
  values: [20],
  tickCount: 4,
  tracksLeft: true,
  hasMarkers: true
};
Stepped.storyName = 'Stepped';
export var WithIcons = Template.bind({});
WithIcons.args = {
  domain: [0, 40],
  step: 10,
  mode: 1,
  values: [20],
  tickCount: 4,
  tracksLeft: true,
  hasMarkers: true,
  IconLeft: IconBrightnessLow,
  IconRight: IconBrightnessHigh
};
WithIcons.storyName = 'With icons';
export var WithLabels = Template.bind({});
WithLabels.args = {
  domain: [0, 40],
  step: 2,
  mode: 1,
  values: [20],
  tracksLeft: true,
  hasLabels: true,
  hasMarkers: true,
  tickCount: 20
};
WithLabels.storyName = 'With labels';
export var ReversedScale = Template.bind({});
ReversedScale.args = {
  domain: [0, 40],
  step: 2,
  mode: 1,
  values: [20],
  tracksRight: true,
  hasLabels: true,
  hasMarkers: true,
  tickCount: 20,
  isReversed: true
};
ReversedScale.storyName = 'Reversed scale';
export var Disabled = Template.bind({});
Disabled.args = {
  domain: [0, 40],
  step: 10,
  mode: 1,
  values: [20],
  tracksLeft: true,
  hasMarkers: true,
  isDisabled: true
};
Disabled.storyName = 'Disabled';