"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const classNames = require("classnames");
const React = __importStar(require("react"));
const react_jss_1 = __importDefault(require("react-jss"));
const shortid = __importStar(require("shortid"));
const Tooltip_1 = require("../Tooltip");
var TEXT;
(function (TEXT) {
    TEXT[TEXT["ON_OFF"] = 0] = "ON_OFF";
    TEXT[TEXT["YES_NO"] = 1] = "YES_NO";
})(TEXT = exports.TEXT || (exports.TEXT = {}));
const transition = {
    transition: 'all 500ms ease-in-out',
};
const styles = {
    hint: {
        width: 'initial',
        maxWidth: 200,
        marginTop: 20,
        marginRight: 5,
    },
    switcher: Object.assign({ display: 'flex', height: '100%', position: 'relative', width: '200%' }, transition),
    button: ((props) => (Object.assign({ backgroundSize: '100%', background: 'gray', boxSizing: 'border-box', position: 'absolute', top: '4px', left: 48, width: 11, height: 11, cursor: props.disabled ? 'not-allowed' : 'pointer', borderRadius: '100%' }, transition))),
    content: Object.assign({ background: 'gray', display: 'inline-block', float: 'left', height: '100%', width: '64px', fontSize: '9px', fontWeight: 'bold', textTransform: 'uppercase', top: '10px' }, transition, { '& span': {
            height: '100%',
            lineHeight: '20px',
            float: 'left',
        } }),
    contentLeft: {
        backgroundImage: 'linear-gradient(180deg, #213655 0%, #385679 34.24%, #4A7496 79.87%, #7272A0 100%)',
        backgroundSize: '100%',
        '& span': {
            marginRight: '20px',
            float: 'right',
        },
    },
    contentRight: {
        backgroundColor: 'white',
        color: 'gray',
        backgroundSize: '100%',
        '& span': {
            marginLeft: '18px',
            display: 'inline-block',
            width: 22,
            textAlign: 'center',
        },
    },
    viewport: ((props) => ({
        boxSizing: 'content-box',
        display: 'block',
        width: '44px',
        height: '19px',
        overflow: 'hidden',
        position: 'relative',
        cursor: props.disabled ? 'not-allowed' : 'pointer',
        borderRadius: '40px',
        color: '#fff',
        float: 'right',
        userSelect: 'none',
        border: '1px solid #EEE',
    })),
    toggle: {
        display: 'none',
        visibility: 'hidden',
        '& + $viewport > $switcher': {
            left: '-100%',
        },
        '& + $viewport > $button': {
            left: 48,
        },
        '& + $viewport > $content': {
            left: '65px',
        },
        '& + $viewport > $contentLeft': {
            marginLeft: 0,
        },
        '&:checked + $viewport > $switcher': {
            left: 0,
        },
        '&:checked + $viewport $button': {
            left: 28,
            color: 'white',
            backgroundColor: 'white',
        },
        '&:checked + $viewport $contentLeft': {
            marginLeft: 0,
        },
        '&:disabled + $viewport $content': {
            color: '#C9C9C9',
            background: 'white',
        },
        '&:disabled:checked + $viewport $content': {
            color: '#C9C9C9',
            background: 'white',
        },
        '&:disabled:checked + $viewport $button': {
            backgroundColor: '#C9C9C9',
        },
    },
};
class SwitcherImpl extends React.PureComponent {
    constructor(props) {
        super(props);
        this.inputId = `switcher-input-${shortid.generate()}`;
        this.values = {
            [TEXT.ON_OFF]: { 0: 'off', 1: 'on' },
            [TEXT.YES_NO]: { 0: 'no', 1: 'yes' },
        };
    }
    render() {
        const { classes, checked, onChange, disabled, text, disabledHint } = this.props;
        const hint = disabled ? disabledHint : '';
        const values = this.values[text];
        return (React.createElement("div", null,
            React.createElement(Tooltip_1.Tooltip, { hintClassname: classes.hint, tooltip: hint },
                React.createElement("input", { type: "checkbox", id: this.inputId, className: classes.toggle, checked: checked, disabled: disabled, onChange: onChange }),
                React.createElement("label", { className: classes.viewport, htmlFor: this.inputId },
                    React.createElement("div", { className: classes.switcher },
                        React.createElement("div", { className: classes.button }, "\u00A0"),
                        React.createElement("div", { className: classNames(classes.content, classes.contentLeft) },
                            React.createElement("span", null, values[1])),
                        React.createElement("div", { className: classNames(classes.content, classes.contentRight) },
                            React.createElement("span", null, values[0])))))));
    }
}
SwitcherImpl.defaultProps = {
    text: TEXT.ON_OFF,
    onChange: () => { },
    checked: false,
    disabled: false,
    disabledHint: '',
};
exports.Switcher = react_jss_1.default(styles)(SwitcherImpl);
//# sourceMappingURL=index.js.map