import focus from '@dojo/framework/core/middleware/focus';
import { createICacheMiddleware } from '@dojo/framework/core/middleware/icache';
import theme from '../middleware/theme';
import { create, tsx } from '@dojo/framework/core/vdom';
import { formatAriaProperties } from '../common/util';
import Label from '../label/index';
import * as css from '../theme/default/slider.m.css';
import * as fixedCss from './styles/slider.m.css';
const factory = create({
    theme,
    focus,
    icache: createICacheMiddleware()
})
    .properties()
    .children();
export const Slider = factory(function Slider({ id, middleware: { theme, focus, icache }, properties, children }) {
    const { aria = {}, disabled, widgetId = `slider-${id}}`, valid, labelAfter, labelHidden, max = 100, min = 0, name, readOnly, required, showOutput = true, step = 1, vertical = false, verticalHeight = '200px', outputIsTooltip = false, theme: themeProp, variant, classes, onOut, onOver, onBlur, onFocus, onValue } = properties();
    const [{ output, label } = { output: undefined, label: undefined }] = children();
    const { initialValue = min } = properties();
    let { value } = properties();
    if (value === undefined) {
        value = icache.get('value') || initialValue;
        const existingInitialValue = icache.getOrSet('initialValue', min);
        if (initialValue !== existingInitialValue) {
            value = initialValue;
            if (initialValue > max) {
                value = max;
            }
            else if (initialValue < min) {
                value = min;
            }
            icache.set('value', value);
            icache.set('initialValue', initialValue);
            onValue && onValue(value);
        }
    }
    else {
        if (value > max) {
            value = max;
        }
        else if (value < min) {
            value = min;
        }
        icache.set('value', value);
    }
    const themeCss = theme.classes(css);
    const percentValue = ((value - min) / (max - min)) * 100;
    let outputStyles = {};
    if (outputIsTooltip) {
        outputStyles = vertical ? { top: `${100 - percentValue}%` } : { left: `${percentValue}%` };
    }
    const slider = (tsx("div", { classes: [themeCss.inputWrapper, fixedCss.inputWrapperFixed], styles: vertical ? { height: verticalHeight } : {} },
        tsx("input", Object.assign({ key: "input" }, formatAriaProperties(aria), { classes: [themeCss.input, fixedCss.nativeInput], disabled: disabled, id: widgetId, focus: focus.shouldFocus, "aria-invalid": valid === false ? 'true' : undefined, max: `${max}`, min: `${min}`, name: name, readOnly: readOnly, "aria-readonly": readOnly ? 'true' : undefined, required: required, step: `${step}`, styles: vertical ? { width: verticalHeight } : {}, type: "range", value: `${value}`, onblur: () => onBlur && onBlur(), onfocus: () => onFocus && onFocus(), onpointerenter: () => onOver && onOver(), onpointerleave: () => onOut && onOut(), oninput: (event) => {
                event.stopPropagation();
                const value = parseFloat(event.target.value);
                icache.set('value', value);
                onValue && onValue(value);
            } })),
        tsx("div", { classes: [themeCss.track, fixedCss.trackFixed], "aria-hidden": "true", styles: vertical ? { width: verticalHeight } : {} },
            tsx("span", { classes: [themeCss.fill, fixedCss.fillFixed], styles: { width: `${percentValue}%` } }),
            tsx("span", { classes: [themeCss.thumb, fixedCss.thumbFixed], styles: { left: `${percentValue}%` } })),
        showOutput ? (tsx("output", { classes: [themeCss.output, outputIsTooltip ? themeCss.outputTooltip : null], for: widgetId, styles: outputStyles, tabIndex: -1 }, output ? output(value) : `${value}`)) : null));
    const content = [
        label ? (tsx(Label, { theme: themeProp, classes: classes, variant: variant, disabled: disabled, focused: focus.shouldFocus(), valid: valid, readOnly: readOnly, required: required, hidden: labelHidden, secondary: true, forId: widgetId }, label)) : null,
        slider
    ];
    return (tsx("div", { key: "root", classes: [
            theme.variant(),
            themeCss.root,
            disabled ? themeCss.disabled : null,
            focus.isFocused('input') ? themeCss.focused : null,
            valid === false ? themeCss.invalid : null,
            valid === true ? themeCss.valid : null,
            readOnly ? themeCss.readonly : null,
            vertical ? themeCss.vertical : null,
            fixedCss.rootFixed
        ] }, labelAfter ? content.reverse() : content));
});
export default Slider;

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