"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToggleButton = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const join_1 = tslib_1.__importDefault(require("../utils/join"));
const ToggleButton = ({ checked, onChange, disabled, className, children, style = {}, 'data-name': dataName, }) => {
    const handleChange = (event) => {
        if (disabled) {
            return;
        }
        onChange(Boolean(event.target.checked));
    };
    const baseClassName = 'ab-ToggleButton';
    const preparedClassName = (0, join_1.default)(className, baseClassName, checked && `${baseClassName}--checked`, disabled && `${baseClassName}--disabled`);
    return (React.createElement("label", { "data-name": dataName, style: style, className: preparedClassName },
        React.createElement("input", { type: "checkbox", disabled: disabled, checked: Boolean(checked), className: `${baseClassName}__input`, onChange: handleChange }),
        React.createElement(rebass_1.Flex, { alignItems: "center", justifyContent: checked ? 'start' : 'end', className: `${baseClassName}__slider` },
            React.createElement("div", { className: `${baseClassName}__text` }, children))));
};
exports.ToggleButton = ToggleButton;
