var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
import React, { useState } from 'react';
import noop from 'lodash/noop';
import styled from '@monstrosity/utilities/themed-components';
import { ApplyOpacity } from '@monstrosity/utilities/apply-opacity/apply-opacity';
import { Body, BodyStyle } from '../../primitives/Typeography/typeography';
var Layout = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\talign-items: center;\n\n\t", " {\n\t\tmargin-left: 0.5rem;\n\t}\n"], ["\n\tdisplay: flex;\n\talign-items: center;\n\n\t", " {\n\t\tmargin-left: 0.5rem;\n\t}\n"])), BodyStyle);
var Label = styled.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tdisplay: flex;\n\tfilter: ", ";\n"], ["\n\tdisplay: flex;\n\tfilter: ", ";\n"])), function (_a) {
    var disabled = _a.disabled;
    return disabled ? 'opacity(0.75);' : 'unset';
});
var Check = styled.svg(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\tfill: none;\n\tstroke: white;\n\tstroke-width: 3px;\n\twidth: 100%;\n\theight: 100%;\n"], ["\n\tfill: none;\n\tstroke: white;\n\tstroke-width: 3px;\n\twidth: 100%;\n\theight: 100%;\n"])));
var HiddenCheckbox = styled.input.attrs({ 'type': 'checkbox' })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\tborder: 0;\n\tclip: rect(0 0 0 0);\n\tclippath: inset(50%);\n\theight: 1px;\n\tmargin: -1px;\n\toverflow: hidden;\n\tpadding: 0;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n"], ["\n\tborder: 0;\n\tclip: rect(0 0 0 0);\n\tclippath: inset(50%);\n\theight: 1px;\n\tmargin: -1px;\n\toverflow: hidden;\n\tpadding: 0;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n"])));
var StyledCheckbox = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\tdisplay: flex;\n    justify-content: center;\n    align-items: center;\n\twidth: 1rem;\n\theight: 1rem;\n\tbackground: ", ";\n\tborder: 1px solid ", ";\n\tborder-radius: ", ";\n\ttransition: all 150ms;\n\n\t", ":focus + & {\n\t\tbox-shadow: 0 0 0 0.2rem ", ";\n\t}\n\n\t", " {\n\t\tvisibility: ", "\n\t}\n"], ["\n\tdisplay: flex;\n    justify-content: center;\n    align-items: center;\n\twidth: 1rem;\n\theight: 1rem;\n\tbackground: ",
    ";\n\tborder: 1px solid ", ";\n\tborder-radius: ", ";\n\ttransition: all 150ms;\n\n\t", ":focus + & {\n\t\tbox-shadow: 0 0 0 0.2rem ", ";\n\t}\n\n\t", " {\n\t\tvisibility: ", "\n\t}\n"])), function (_a) {
    var checked = _a.checked, disabled = _a.disabled, theme = _a.theme;
    return checked
        ? disabled ? theme.style.colour.disabled.dark : theme.style.colour.highlight
        : disabled ? theme.style.colour.disabled.fill : theme.style.colour.constrast;
}, function (_a) {
    var theme = _a.theme, disabled = _a.disabled;
    return disabled ? theme.style.colour.disabled.dark : theme.style.colour.highlight;
}, function (_a) {
    var theme = _a.theme;
    return theme.style.radius;
}, HiddenCheckbox, function (_a) {
    var theme = _a.theme, disabled = _a.disabled;
    return disabled ? 'unset' : ApplyOpacity(theme.style.colour.highlight, 0.9);
}, Check, function (_a) {
    var checked = _a.checked;
    return checked ? 'visible' : 'hidden';
});
var CheckboxRoot = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\tdisplay: inline-block;\n\tvertical-align: middle;\n\n\tcursor: ", ";\n"], ["\n\tdisplay: inline-block;\n\tvertical-align: middle;\n\n\tcursor: ", ";\n"])), function (_a) {
    var disabled = _a.disabled, theme = _a.theme;
    return disabled ? theme.cursor.disabled : theme.cursor.pointer;
});
export var Checkbox = function (_a) {
    var id = _a.id, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, label = _a.label, intermediate = _a.intermediate;
    var _d = __read(useState(intermediate || isChecked), 2), checked = _d[0], setCheckedState = _d[1];
    var setChecked = disabled ? noop : setCheckedState;
    var onCheckChange = function (e) {
        setChecked(e.target.checked);
        if (onChange)
            onChange(id, e.target.checked);
    };
    var onKeyDown = function (e) {
        if (e.key === 'Enter') {
            setChecked(!e.target.checked);
            if (onChange)
                onChange(id, !e.target.checked);
        }
    };
    var points = intermediate
        ? '6,12 18,12'
        : '20 6 9 17 4 12';
    return (React.createElement(Layout, null,
        React.createElement(Label, { disabled: disabled },
            React.createElement(CheckboxRoot, { disabled: disabled },
                React.createElement(HiddenCheckbox, { checked: checked, onChange: onCheckChange, onKeyDown: onKeyDown }),
                React.createElement(StyledCheckbox, { checked: checked, disabled: disabled },
                    React.createElement(Check, { viewBox: "0 0 24 24" },
                        React.createElement("polyline", { points: points }))))),
        label &&
            React.createElement(Body, null, label)));
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
