import * as baseCss from '../common/styles/base.m.css';
import * as css from '../theme/default/range-slider.m.css';
import * as fixedCss from './styles/range-slider.m.css';
import Label from '../label/index';
import dimensions from '@dojo/framework/core/middleware/dimensions';
import focus from '@dojo/framework/core/middleware/focus';
import theme from '../middleware/theme';
import { create, tsx } from '@dojo/framework/core/vdom';
import { createICacheMiddleware } from '@dojo/framework/core/middleware/icache';
import { formatAriaProperties } from '../common/util';
const factory = create({
    dimensions,
    focus,
    icache: createICacheMiddleware(),
    theme
})
    .properties()
    .children();
export const RangeSlider = factory(function RangeSlider({ children, id, middleware: { dimensions, focus, icache, theme }, properties }) {
    const { name = '', max: maxRestraint = 100, min: minRestraint = 0 } = properties();
    const [{ label, output } = {}] = children();
    const { aria = {}, classes, disabled, labelHidden, maxName = `${name}_max`, maximumLabel = 'Maximum', minName = `${name}_min`, minimumLabel = 'Minimum', onBlur, onFocus, onOut, onOver, onValue, outputIsTooltip, readOnly, required, showOutput = false, step = 1, theme: themeProp, valid, variant, initialValue = {
        max: maxRestraint,
        min: minRestraint
    }, widgetId = `range-slider-${id}` } = properties();
    let { value } = properties();
    if (value === undefined) {
        value = icache.get('value');
        const existingInitialValue = icache.get('initialValue');
        if (!existingInitialValue ||
            initialValue.min !== existingInitialValue.min ||
            initialValue.max !== existingInitialValue.max) {
            icache.set('value', initialValue);
            icache.set('initialValue', initialValue);
            value = initialValue;
        }
    }
    const themeCss = theme.classes(css);
    const size = dimensions.get('root');
    const isFocused = icache.getOrSet('focused', false);
    const maxLabelId = `max-label-${id}`;
    const minLabelId = `min-label-${id}`;
    const min = Math.max((value || initialValue).min, minRestraint);
    const max = Math.min((value || initialValue).max, maxRestraint);
    const slider1Percent = (min - minRestraint) / (maxRestraint - minRestraint);
    const slider2Percent = (max - minRestraint) / (maxRestraint - minRestraint);
    const slider1Size = slider1Percent + (slider2Percent - slider1Percent) / 2;
    const slider2Size = 1 - slider1Size;
    const getInputProperties = (isSlider1) => (Object.assign({}, formatAriaProperties(aria), { 'aria-describedby': isSlider1 ? minLabelId : maxLabelId, 'aria-invalid': (valid === false ? 'true' : undefined), 'aria-labelledby': `${widgetId}-label`, 'aria-readonly': (readOnly === true
            ? 'true'
            : undefined), classes: [themeCss.input, fixedCss.nativeInput], disabled, max: `${maxRestraint}`, min: `${minRestraint}`, name: isSlider1 ? minName : maxName, onblur: () => {
            icache.set('focused', false);
            onBlur && onBlur();
        }, onfocus: () => {
            icache.set('focused', true);
            onFocus && onFocus();
        }, oninput: (event) => {
            onInput(event, isSlider1);
        }, readonly: readOnly, required, step: `${step}`, type: 'range' }));
    const onInput = (event, isMinEvent) => {
        event.stopPropagation();
        const value = event.target.value;
        const returnValues = isMinEvent
            ? { min: Math.min(parseFloat(value), max), max }
            : { min, max: Math.max(min, parseFloat(value)) };
        icache.set('value', returnValues);
        onValue && onValue(returnValues);
    };
    const slider1 = (tsx("input", Object.assign({}, getInputProperties(true), { key: "slider1", value: `${min}`, styles: {
            clip: `rect(auto, ${Math.round(slider1Size * size.client.width)}px, auto, auto)`
        } })));
    const slider2 = (tsx("input", Object.assign({}, getInputProperties(false), { key: "slider2", styles: {
            clip: `rect(auto, auto, auto, ${Math.round((1 - slider2Size) * size.client.width)}px)`
        }, value: `${max}` })));
    return (tsx("div", { key: "root", classes: [
            theme.variant(),
            themeCss.root,
            disabled ? themeCss.disabled : null,
            isFocused ? themeCss.focused : null,
            valid === false ? themeCss.invalid : null,
            valid === true ? themeCss.valid : null,
            readOnly ? themeCss.readonly : null,
            showOutput ? themeCss.hasOutput : null
        ] },
        label ? (tsx(Label, { classes: classes, variant: variant, disabled: disabled, focused: isFocused, hidden: labelHidden, key: "label", readOnly: readOnly, required: required, secondary: true, theme: themeProp, valid: valid, widgetId: `${widgetId}-label` }, label)) : null,
        tsx("div", { classes: [themeCss.inputWrapper, fixedCss.inputWrapperFixed], onpointerenter: () => {
                onOver && onOver();
            }, onpointerleave: () => {
                onOut && onOut();
            } },
            slider1,
            tsx("div", { classes: baseCss.visuallyHidden, id: minLabelId, key: "minimumLabel" }, minimumLabel),
            slider2,
            tsx("div", { classes: baseCss.visuallyHidden, id: maxLabelId, key: "maximumLabel" }, maximumLabel),
            tsx("div", { classes: [themeCss.filled, fixedCss.filledFixed], key: "track", styles: {
                    left: Math.round(slider1Percent * 100) + '%',
                    width: Math.round((slider2Percent - slider1Percent) * 100) + '%'
                } }),
            tsx("div", { key: "leftThumb", classes: [
                    themeCss.thumb,
                    themeCss.leftThumb,
                    focus.isFocused('slider1') ? themeCss.focused : undefined,
                    fixedCss.thumbFixed
                ], styles: {
                    left: Math.round(slider1Percent * 100) + '%'
                } }),
            tsx("div", { key: "rightThumb", classes: [
                    themeCss.thumb,
                    themeCss.rightThumb,
                    focus.isFocused('slider2') ? themeCss.focused : undefined,
                    fixedCss.thumbFixed
                ], styles: {
                    left: Math.round(slider2Percent * 100) + '%'
                } }),
            showOutput ? (tsx("output", { classes: [themeCss.output, outputIsTooltip ? themeCss.outputTooltip : null], for: widgetId, styles: outputIsTooltip
                    ? {
                        left: `${Math.round((slider1Percent +
                            (slider2Percent - slider1Percent) / 2) *
                            100)}%`
                    }
                    : undefined, tabIndex: -1 }, output ? output({ min, max }) : `${min}, ${max}`)) : null)));
});
export default RangeSlider;

/*# sourceMappingURL=index.mjs.map*/