"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importStar(require("react"));
var tab_index_1 = require("@monstrosity/enums/tab-index");
var themed_components_1 = __importStar(require("@monstrosity/utilities/themed-components"));
var no_outline_1 = require("@monstrosity/utilities/common-styles/no-outline");
exports.ToggleWrapper = themed_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tline-height: 0;\n\tmargin-top: 1rem;\n"], ["\n\tline-height: 0;\n\tmargin-top: 1rem;\n"])));
var Label = themed_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tposition: relative;\n\tdisplay: block;\n\tbox-sizing: border-box;\n\twidth: 2rem;\n\theight: 1.25rem;\n\tcursor: pointer;\n\tuser-select: none;\n\ttransition: background 150ms ease;\n\tborder-radius: 0.625rem;\n\tbackground-color: ", ";\n\tflex: 0 0 auto;\n\n\t&::before {\n\t\tposition: absolute;\n\t\ttop: 0.125rem;\n\t\tleft: 0.125rem;\n\t\tdisplay: block;\n\t\twidth: 1rem;\n\t\theight: 1rem;\n\t\tcontent: '';\n\t\ttransition: background 150ms ease, left 150ms ease, box-shadow 150ms ease;\n\t\ttransform: translateZ(0);\n\t\tborder-radius: 100%;\n\t\tbackground-color: ", ";\n\t}\n\n\t&:active {\n\t\tbackground-color: ", ";\n\n\t\t&::before {\n\t\t\tbackground-color: ", ";\n\t\t\tbox-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.3);\n\t\t}\n\t} \n"], ["\n\tposition: relative;\n\tdisplay: block;\n\tbox-sizing: border-box;\n\twidth: 2rem;\n\theight: 1.25rem;\n\tcursor: pointer;\n\tuser-select: none;\n\ttransition: background 150ms ease;\n\tborder-radius: 0.625rem;\n\tbackground-color: ", ";\n\tflex: 0 0 auto;\n\n\t&::before {\n\t\tposition: absolute;\n\t\ttop: 0.125rem;\n\t\tleft: 0.125rem;\n\t\tdisplay: block;\n\t\twidth: 1rem;\n\t\theight: 1rem;\n\t\tcontent: '';\n\t\ttransition: background 150ms ease, left 150ms ease, box-shadow 150ms ease;\n\t\ttransform: translateZ(0);\n\t\tborder-radius: 100%;\n\t\tbackground-color: ", ";\n\t}\n\n\t&:active {\n\t\tbackground-color: ", ";\n\n\t\t&::before {\n\t\t\tbackground-color: ", ";\n\t\t\tbox-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.3);\n\t\t}\n\t} \n"])), function (_a) {
    var theme = _a.theme;
    return theme.style.colour.neutralScale.dark;
}, function (_a) {
    var theme = _a.theme;
    return theme.style.colour.neutralScale.light;
}, function (_a) {
    var theme = _a.theme;
    return theme.style.colour.neutralScale.darkest;
}, function (_a) {
    var theme = _a.theme;
    return theme.style.colour.neutralScale.light;
});
var ContainerCssHover = themed_components_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t& ", " { \n\t\tbackground-color: ", "; \n\t}\n"], ["\n\t& ", " { \n\t\tbackground-color: ", "; \n\t}\n"])), Label, function (_a) {
    var theme = _a.theme;
    return theme.style.colour.highlight;
});
var ContainerCssBase = themed_components_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t& ", " { \n\t\tbackground-color: ", "; \n\n\t\t&::before { \n\t\t\tleft: 0.875rem;\n\t\t\tbackground-color: ", "; \n\t\t}\n\t} \n"], ["\n\t& ", " { \n\t\tbackground-color: ", "; \n\n\t\t&::before { \n\t\t\tleft: 0.875rem;\n\t\t\tbackground-color: ", "; \n\t\t}\n\t} \n"])), Label, function (_a) {
    var theme = _a.theme;
    return theme.style.colour.highlight;
}, function (_a) {
    var theme = _a.theme;
    return theme.style.colour.neutralScale.light;
});
var Input = themed_components_1.default.input(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: none;\n"], ["\n    display: none;\n"])));
var Container = themed_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: inline-flex;\n    flex-direction: row;\n    box-sizing: border-box;\n    height: 1.25rem;\n    vertical-align: middle;\n    justify-content: flex-start;\n    align-content: center;\n    align-items: center;\n    max-width: 100%;\n    cursor: ", ";\n    opacity: ", ";\n\n    &:hover {\n        & ", " {\n            background-color: ", ";\n\n            &::before {\n                background-color: ", ";\n            }\n        }\n\n        ", "\n    }\n\n    ", "\n\n\t&:focus {\n\t\t", " {\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n\n\t", "\n"], ["\n    display: inline-flex;\n    flex-direction: row;\n    box-sizing: border-box;\n    height: 1.25rem;\n    vertical-align: middle;\n    justify-content: flex-start;\n    align-content: center;\n    align-items: center;\n    max-width: 100%;\n    cursor: ", ";\n    opacity: ", ";\n\n    &:hover {\n        & ", " {\n            background-color: ", ";\n\n            &::before {\n                background-color: ", ";\n            }\n        }\n\n        ", "\n    }\n\n    ", "\n\n\t&:focus {\n\t\t", " {\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n\n\t", "\n"])), function (_a) {
    var disabled = _a.disabled;
    return disabled ? 'not-allowed' : 'unset';
}, function (_a) {
    var disabled = _a.disabled;
    return disabled ? '0.7' : '1';
}, Label, function (_a) {
    var theme = _a.theme;
    return theme.style.colour.neutralScale.heavy;
}, function (_a) {
    var disabled = _a.disabled, theme = _a.theme;
    return disabled ? theme.style.colour.neutralScale.lightest : theme.style.colour.neutralScale.light;
}, function (_a) {
    var checked = _a.checked;
    return !checked ? '' : ContainerCssHover;
}, function (_a) {
    var checked = _a.checked;
    return !checked ? '' : ContainerCssBase;
}, Label, function (_a) {
    var checked = _a.checked, theme = _a.theme;
    return checked ? theme.style.colour.active : theme.style.colour.neutralScale.dark;
}, no_outline_1.noOutlineOnAll);
var LabelText = themed_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n\tdisplay: inline;\n\tpadding-left: 0.875rem;\n\tcursor: pointer;\n\tuser-select: none;\n\tfont-size: 0.75rem;\n\tcolor: ", ";\n\n\t& b,\n\t& strong {\n\t\tfont-weight: ", ";\n\t}\n"], ["\n\tdisplay: inline;\n\tpadding-left: 0.875rem;\n\tcursor: pointer;\n\tuser-select: none;\n\tfont-size: 0.75rem;\n\tcolor: ", ";\n\n\t& b,\n\t& strong {\n\t\tfont-weight: ", ";\n\t}\n"])), function (_a) {
    var theme = _a.theme;
    return theme.style.colour.text.body;
}, function (_a) {
    var theme = _a.theme;
    return theme.style.weight.strong;
});
var HintText = themed_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n\tpadding-top: 0.16rem;\n\tpadding-left: 2.875rem;\n\tcursor: default;\n\tuser-select: none;\n\tfont-size: 0.75rem;\n\tline-height: 1.3;\n\tcolor: ", ";\n"], ["\n\tpadding-top: 0.16rem;\n\tpadding-left: 2.875rem;\n\tcursor: default;\n\tuser-select: none;\n\tfont-size: 0.75rem;\n\tline-height: 1.3;\n\tcolor: ", ";\n"])), function (_a) {
    var theme = _a.theme;
    return theme.style.colour.text.crossover;
});
var DescriptionText = themed_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n\tdisplay: block;\n\tfont-size: 0.85rem;\n\tline-height: 1.3;\n\tmargin-bottom: 1rem;\n\tcolor: ", ";\n"], ["\n\tdisplay: block;\n\tfont-size: 0.85rem;\n\tline-height: 1.3;\n\tmargin-bottom: 1rem;\n\tcolor: ", ";\n"])), function (_a) {
    var theme = _a.theme;
    return theme.style.colour.text.body;
});
var Toggle = /** @class */ (function (_super) {
    __extends(Toggle, _super);
    function Toggle(props) {
        var _this = _super.call(this, props) || this;
        _this.onChange = function (e) {
            var _a = _this.props, disabled = _a.disabled, id = _a.id, onChange = _a.onChange;
            if (!disabled) {
                _this.setState({
                    'checked': e.target.checked,
                });
                onChange(e.target.checked, id);
            }
        };
        _this.onKeyDown = function (e) {
            if (e.key === 'Enter') {
                var _a = _this.props, disabled = _a.disabled, id = _a.id, onChange = _a.onChange;
                var checked = _this.state.checked;
                if (!disabled) {
                    _this.setState({
                        'checked': !checked,
                    });
                    onChange(!checked, id);
                }
            }
        };
        _this.state = {
            'checked': _this.props.checked,
        };
        _this.input = react_1.default.createRef();
        return _this;
    }
    Toggle.prototype.focus = function () {
        if (this.input.current)
            this.input.current.focus();
    };
    Toggle.prototype.blur = function () {
        if (this.input.current)
            this.input.current.blur();
    };
    Toggle.prototype.renderLabel = function () {
        var label = this.props.label;
        return label
            ? react_1.default.createElement(LabelText, null, label)
            : null;
    };
    Toggle.prototype.renderHint = function () {
        var hint = this.props.hint;
        return hint
            ? react_1.default.createElement(HintText, null, hint)
            : null;
    };
    Toggle.prototype.renderDescription = function () {
        var description = this.props.description;
        return description
            ? react_1.default.createElement(DescriptionText, null, description)
            : null;
    };
    Toggle.prototype.render = function () {
        var _a = this.props, id = _a.id, name = _a.name, disabled = _a.disabled, tabIndex = _a.tabIndex;
        var checked = this.state.checked;
        var calculatedTabIndex = disabled
            ? tab_index_1.TabFlow.Disabled
            : tabIndex || tab_index_1.TabFlow.Enabled;
        return (react_1.default.createElement(exports.ToggleWrapper, null,
            this.renderDescription(),
            react_1.default.createElement(Container, { checked: checked, disabled: disabled, tabIndex: calculatedTabIndex, onKeyDown: this.onKeyDown },
                react_1.default.createElement(Input, { id: id.toString(), name: name, checked: checked, type: "checkbox", 
                    // tabIndex={tabIndex || TabFlow.Enabled}
                    ref: this.input, onChange: this.onChange }),
                react_1.default.createElement(Label, { htmlFor: id.toString(), className: 'switcher' }),
                this.renderLabel()),
            this.renderHint()));
    };
    return Toggle;
}(react_1.PureComponent));
exports.Toggle = Toggle;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
