import React, { Component } from 'react';
import Slide from 'rc-slider';
import { dataHooks } from './constants';
import { generateID } from '../utils/generateId';
import SliderHandle from './SliderHandle';
import Text from '../Text';
import { st, classes } from './Slider.st.css.js';
import { parseColor, getRailStyle } from './utils';
const range = ({ min, max, step }) => {
    const arr = [];
    for (let i = min; i <= max; i += step) {
        arr.push(i);
    }
    return arr;
};
/**
 * A slider component with multi-range support
 */
export default class Slider extends Component {
    constructor() {
        super(...arguments);
        this._renderHandle = handleProps => {
            const { gradientColor, displayTooltip, disabled, marks, dataHook, direction, onFocus, onBlur, formatValue, } = this.props;
            const { index, value, min, max, offset, ref, ariaLabel, reverse } = handleProps;
            let tooltipValue;
            if (this._isCustomMarks()) {
                if (marks.hasOwnProperty(value)) {
                    tooltipValue = marks[value].toString();
                }
            }
            else {
                tooltipValue = formatValue(value);
            }
            return (React.createElement(SliderHandle, { key: index, gradientColor: gradientColor, disabled: disabled, displayTooltip: displayTooltip, tooltipValue: tooltipValue, handleProps: {
                    ref,
                    offset,
                    min,
                    max,
                    value,
                    reverse,
                    ariaLabel,
                }, index: index, dataHook: dataHook, direction: direction, onBlurCustom: onBlur, onFocusCustom: onFocus }));
        };
        this._renderSlider = () => {
            const { gradientColor, onFocus, onBlur, pushable, allowCross, value, displayMarks, direction, startPoint, dataHook, id, ariaLabelForHandle, rtl, className, disabled, ...rest } = this.props;
            return Array.isArray(value) && value.length > 1 ? (React.createElement(Slide.Range, { ...rest, disabled: disabled, vertical: direction === 'vertical', railStyle: getRailStyle({ gradientColor, disabled, direction }), prefixCls: "wsr-slider", handle: this._renderHandle, marks: displayMarks ? this._getMarks() : {}, value: value, pushable: pushable, allowCross: allowCross, reverse: rtl, ariaLabelGroupForHandles: ariaLabelForHandle })) : (React.createElement(Slide, { ...rest, disabled: disabled, vertical: direction === 'vertical', railStyle: getRailStyle({ gradientColor, disabled, direction }), prefixCls: "wsr-slider", startPoint: startPoint, handle: this._renderHandle, marks: displayMarks ? this._getMarks() : {}, value: Array.isArray(value) ? value[0] : value, reverse: rtl, ariaLabelForHandle: Array.isArray(ariaLabelForHandle)
                    ? ariaLabelForHandle[0]
                    : ariaLabelForHandle }));
        };
    }
    _getMarks() {
        const marksLabels = {};
        if (this._isCustomMarks()) {
            const { marks } = this.props;
            Object.entries(marks).forEach(([key, value]) => {
                marksLabels[key] = {
                    label: this._createMarkNode(value, true),
                };
            });
        }
        else {
            const { min, max, step, startPoint } = this.props;
            range({ min, max, step }).forEach(entry => {
                const shouldRenderMarkLabel = entry === min || entry === max || entry === startPoint;
                marksLabels[entry] = {
                    label: this._createMarkNode(entry, shouldRenderMarkLabel),
                };
            });
        }
        return marksLabels;
    }
    _isCustomMarks() {
        const { marks } = this.props;
        return Object.entries(marks).length > 0;
    }
    _createMarkNode(value, shouldRenderMarkLabel) {
        return (React.createElement("div", { className: st(classes.mark, { direction: this.props.direction }) },
            React.createElement("div", { className: classes.markLine }),
            React.createElement("div", { className: classes.markValue }, shouldRenderMarkLabel && (React.createElement(Text, { className: classes.markLabel, dataHook: dataHooks.sliderMarkLabel, weight: "thin", size: "small" }, value)))));
    }
    render() {
        const { dataHook, id, direction, className, gradientColor, marksLabelAlignment, } = this.props;
        const hasGradient = !!gradientColor;
        const horizontal = direction !== 'vertical';
        return (React.createElement("div", { className: st(classes.root, { hasGradient, horizontal, marksLabelAlignment }, className), id: id, "data-hook": dataHook, "data-direction": direction }, this._renderSlider()));
    }
}
Slider.displayName = 'Slider';
Slider.defaultProps = {
    min: 1,
    max: 20,
    step: 1,
    value: 3,
    allowCross: true,
    id: generateID(),
    displayTooltip: true,
    displayMarks: true,
    marks: {},
    rtl: false,
    disabled: false,
    direction: 'horizontal',
    startPoint: undefined,
    marksLabelAlignment: 'center',
    formatValue: value => value.toString(),
};
//# sourceMappingURL=Slider.js.map