"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = require("react");
const mobx_react_1 = require("xmobx/mobx-react");
const exotic_1 = require("exotic");
// import { ObserverInput } from '../inputs/ObserverInput'
// @todo
const styleh_components_1 = require("styleh-components");
const ui_1 = require("@skava/ui");
exports.StyledLabel = styleh_components_1.styled.label `
  user-select: none;
  display: inline-flex;
  flex-basis: 70%;
  align-self: center;
`;
/**
 * @see https://www.styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity
 */
exports.StyledToggle = styleh_components_1.styled(ui_1.Toggle) `
  && {
    align-self: center;
    display: inline-flex;
  }
  svg {
    height: rem(20);
    width: rem(20);
    border-radius: rem(5);
  }
`;
let TogglePlugin = class TogglePlugin extends React.Component {
    constructor() {
        super(...arguments);
        this.handleClick = (args) => {
            const { state } = this.props;
            state.setIsSelected(args.isSelected);
        };
        this.renderLabel = () => {
            const { state } = this.props;
            const { label } = state;
            return (React.createElement(exports.StyledLabel, { htmlFor: state.identifier }, label));
        };
    }
    static isSatisfiedByProps(props) {
        return ['toggle', 'checkbox', 'radio'].includes(props.type);
    }
    render() {
        const _a = this.props, { state, className } = _a, remainingProps = tslib_1.__rest(_a, ["state", "className"]);
        // return <ObserverInput {...this.props} type="checkbox" />
        return (React.createElement(exports.StyledToggle, { className: className, iconType: state.type, id: state.identifier, isSelected: state.isSelected, onToggle: this.handleClick, renderLabel: this.renderLabel }));
    }
};
// used by state
TogglePlugin.defaultState = (inputState) => {
    return {
        tooltip: 'to do, or not to do?',
        serializer: (state) => {
            return {
                [inputState.propertyName]: exotic_1.toBoolean(inputState.isSelected),
            };
        },
        // how can it be wrong unless this is an `i agree`
        validator: (value) => true,
    };
};
TogglePlugin = tslib_1.__decorate([
    mobx_react_1.observer
], TogglePlugin);
exports.TogglePlugin = TogglePlugin;
exports.default = TogglePlugin;
//# sourceMappingURL=TogglePlugin.js.map