"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const core_1 = require("@material-ui/core");
const FormControl_1 = tslib_1.__importDefault(require("@material-ui/core/FormControl"));
const FormHelperText_1 = tslib_1.__importDefault(require("@material-ui/core/FormHelperText"));
const FormLabel_1 = tslib_1.__importDefault(require("@material-ui/core/FormLabel"));
const Slider_1 = tslib_1.__importDefault(require("@material-ui/core/Slider"));
const react_1 = tslib_1.__importDefault(require("react"));
const react_native_1 = require("react-native");
const component_mapper_1 = require("@bluebase/component-mapper");
Slider_1.default.displayName = 'Slider';
FormLabel_1.default.displayName = 'FormLabel';
FormHelperText_1.default.displayName = 'FormHelperText';
const styles = (theme) => ({
    helperText: {
        marginTop: 0,
    },
    inlineSlider: {
        display: 'flex',
        flex: 1,
    },
    inlineValue: {
        marginLeft: theme.spacing(2),
    },
    label: {
        flex: 1,
        marginBottom: 0,
    },
    labelWrapper: {
        display: 'flex',
        flexDirection: 'row',
    },
    sliderWrapper: {
        alignItems: 'center',
        display: 'flex',
        flex: 1,
    },
    value: {
        marginBottom: 0,
    },
});
exports.Slider = core_1.withStyles(styles)(component_mapper_1.componentMapper(Slider_1.default, {
    max: 'maximumValue',
    min: 'minimumValue',
    onChange: ({ onChange, onValueChange }) => (event, value) => {
        if (onChange) {
            onChange(event, value);
        }
        if (onValueChange) {
            onValueChange(value);
        }
    },
    classes: 'classes',
    disabled: 'disabled',
    error: 'error',
    helperText: 'helperText',
    id: 'id',
    label: 'label',
    name: 'name',
    required: 'required',
    showValue: 'showValue',
    step: 'step',
    style: ({ style }) => react_native_1.StyleSheet.flatten(style),
    value: 'value',
}, {
    render(newProps, Component) {
        const { error, helperText, id, label, required, classes, showValue } = newProps, props = tslib_1.__rest(newProps, ["error", "helperText", "id", "label", "required", "classes", "showValue"]);
        const formControlProps = {
            error,
            required,
        };
        // Label
        let labelNode = null;
        // Render a simple label
        if (label && !showValue) {
            labelNode = (react_1.default.createElement(FormLabel_1.default, { className: classes.label, htmlFor: id }, label));
        }
        // If we have label and show value, then we show value in line with the label
        else if (label && showValue) {
            labelNode = (react_1.default.createElement("div", { className: classes.labelWrapper, "data-testid": "value-on-top" },
                react_1.default.createElement(FormLabel_1.default, { className: classes.label, htmlFor: id, "data-testid": "label" }, label),
                react_1.default.createElement(FormLabel_1.default, { className: classes.value, "data-testid": "value" }, props.value)));
        }
        let sliderNode = react_1.default.createElement(Component, Object.assign({ id: id }, props));
        // If theres no label then we show value in line with the slider
        if (!label && showValue) {
            sliderNode = (react_1.default.createElement("div", { className: classes.sliderWrapper, "data-testid": "value-on-right" },
                react_1.default.createElement("div", { className: classes.inlineSlider }, sliderNode),
                react_1.default.createElement(FormLabel_1.default, { className: classes.inlineValue, "data-testid": "value" }, props.value)));
        }
        return (react_1.default.createElement(FormControl_1.default, Object.assign({}, formControlProps),
            labelNode,
            sliderNode,
            helperText ? (react_1.default.createElement(FormHelperText_1.default, { className: classes.helperText }, helperText)) : null));
    },
}));
