"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CheckboxLabel = exports.Checkbox = void 0;
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
/*
 * Wire
 * Copyright (C) 2018 Wire Swiss GmbH
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see http://www.gnu.org/licenses/.
 *
 */
const react_1 = require("react");
const React = __importStar(require("react"));
const Input_1 = require("./Input");
const Text_1 = require("../Text");
const StyledLabel = (_a) => {
    var { disabled, markInvalid, aligncenter = false, labelBeforeCheckbox = false, children } = _a, props = __rest(_a, ["disabled", "markInvalid", "aligncenter", "labelBeforeCheckbox", "children"]);
    return ((0, jsx_runtime_1.jsxs)("label", Object.assign({ css: (theme) => (Object.assign(Object.assign(Object.assign(Object.assign({ [`.${Input_1.INPUT_CLASSNAME}:checked + &::before`]: {
                background: `${disabled ? theme.Checkbox.disablecheckedBgColor : theme.general.primaryColor}`,
                borderColor: theme.general.primaryColor,
            }, [`.${Input_1.INPUT_CLASSNAME}:checked + & > svg`]: {
                fill: theme.general.backgroundColor,
            }, [`.${Input_1.INPUT_CLASSNAME} + & > svg`]: Object.assign({ fill: 'none', position: 'absolute', top: '50%', transform: 'translateY(-50%)' }, (labelBeforeCheckbox
                ? {
                    right: '11px',
                }
                : {
                    left: '4px',
                })) }, (!disabled && {
            [`.${Input_1.INPUT_CLASSNAME}:hover + &::before`]: {
                borderColor: theme.general.primaryColor,
            },
        })), { [`.${Input_1.INPUT_CLASSNAME} + &::before`]: Object.assign(Object.assign({ background: disabled ? theme.Checkbox.disableBgColor : theme.Checkbox.background }, (!disabled
                ? {
                    border: markInvalid
                        ? `2px solid ${theme.Checkbox.invalidBorderColor}`
                        : `2px solid ${theme.Checkbox.border}`,
                }
                : {
                    border: `2px solid ${theme.Checkbox.disableBorderColor}`,
                })), { borderRadius: '3px', boxSizing: 'border-box', content: '""', display: 'inline-block', minWidth: '22px', height: '22px', lineHeight: '1.4rem', margin: '0 8px 0 0px', color: theme.general.color }) }), (labelBeforeCheckbox && {
            flexDirection: 'row-reverse',
            justifyContent: 'space-between',
        })), { alignItems: 'center', position: 'relative', margin: '0 0 0 -16px', width: aligncenter ? 'auto' : '100%', lineHeight: '1.4rem', display: 'flex', opacity: disabled ? 0.56 : 1, cursor: disabled ? 'not-allowed' : 'pointer', borderRadius: '4px' })) }, props, { children: [children, (0, jsx_runtime_1.jsx)("svg", Object.assign({ width: "15", height: "13", viewBox: "0 0 16 13", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M5.65685 12.0711L15.9842 1.62738L14.57 0.213167L5.65685 9.24264L1.41421 5L0 6.41421L5.65685 12.0711Z" }) }))] })));
};
exports.Checkbox = React.forwardRef((_a, ref) => {
    var { id, children, style, disabled, wrapperCSS = {}, markInvalid, aligncenter, labelBeforeCheckbox, outlineOffset = '0.4rem' } = _a, props = __rest(_a, ["id", "children", "style", "disabled", "wrapperCSS", "markInvalid", "aligncenter", "labelBeforeCheckbox", "outlineOffset"]);
    const inputId = (0, react_1.useId)();
    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: (theme) => (Object.assign({ alignItems: 'center', display: 'flex', justifyContent: 'flex-start', position: 'relative', left: '-0.3rem', [`.${Input_1.INPUT_CLASSNAME}:focus-visible + label`]: {
                outline: `1px solid ${theme.general.primaryColor}`,
                outlineOffset: outlineOffset,
            } }, wrapperCSS)), style: style }, { children: [(0, jsx_runtime_1.jsx)("input", Object.assign({ type: "checkbox", id: id !== null && id !== void 0 ? id : inputId, style: {
                    height: '22px',
                    marginBottom: '0',
                    opacity: 0,
                    width: '22px',
                    cursor: disabled ? 'not-allowed' : 'pointer',
                }, disabled: disabled, ref: ref, className: Input_1.INPUT_CLASSNAME }, props)), (0, jsx_runtime_1.jsx)(StyledLabel, Object.assign({ htmlFor: id !== null && id !== void 0 ? id : inputId, disabled: disabled, markInvalid: markInvalid, aligncenter: aligncenter, labelBeforeCheckbox: labelBeforeCheckbox }, { children: children }))] })));
});
exports.Checkbox.displayName = 'Checkbox';
const CheckboxLabel = (_a) => {
    var props = __rest(_a, []);
    return ((0, jsx_runtime_1.jsx)(Text_1.Text, Object.assign({ css: (theme) => (Object.assign({}, (0, Text_1.textStyle)(theme, Object.assign({}, props)))) }, props)));
};
exports.CheckboxLabel = CheckboxLabel;
