"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 __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;
};
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 });
var react_1 = __importStar(require("react"));
var noop_1 = __importDefault(require("lodash/noop"));
var themed_components_1 = __importDefault(require("@monstrosity/utilities/themed-components"));
var apply_opacity_1 = require("@monstrosity/utilities/apply-opacity/apply-opacity");
var typeography_1 = require("../../primitives/Typeography/typeography");
var Layout = themed_components_1.default.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"])), typeography_1.BodyStyle);
var Label = themed_components_1.default.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 = themed_components_1.default.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 = themed_components_1.default.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 = themed_components_1.default.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' : apply_opacity_1.ApplyOpacity(theme.style.colour.highlight, 0.9);
}, Check, function (_a) {
    var checked = _a.checked;
    return checked ? 'visible' : 'hidden';
});
var CheckboxRoot = themed_components_1.default.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;
});
exports.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(react_1.useState(intermediate || isChecked), 2), checked = _d[0], setCheckedState = _d[1];
    var setChecked = disabled ? noop_1.default : 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_1.default.createElement(Layout, null,
        react_1.default.createElement(Label, { disabled: disabled },
            react_1.default.createElement(CheckboxRoot, { disabled: disabled },
                react_1.default.createElement(HiddenCheckbox, { checked: checked, onChange: onCheckChange, onKeyDown: onKeyDown }),
                react_1.default.createElement(StyledCheckbox, { checked: checked, disabled: disabled },
                    react_1.default.createElement(Check, { viewBox: "0 0 24 24" },
                        react_1.default.createElement("polyline", { points: points }))))),
        label &&
            react_1.default.createElement(typeography_1.Body, null, label)));
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
