"use strict";
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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Checkbox = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const Flex_1 = require("../Flex");
const utils_1 = require("../../theme/utils");
const Icon_1 = require("../Icon");
const theme_1 = require("../../theme");
const Input = styled_components_1.default.input(utils_1.visuallyHidden);
const CheckStateIcon = (0, styled_components_1.default)(Icon_1.Icon)(() => ({
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    display: 'block',
    visibility: 'hidden',
    opacity: 0,
    pointerEvents: 'none',
    margin: 'auto',
    transition: `150ms`,
}));
const MinusBoxIcon = (0, styled_components_1.default)(Icon_1.Icon)(() => ({
    position: 'absolute',
    top: '71%',
    left: '71%',
    transform: 'translate(-50%, -50%)',
    display: 'block',
    visibility: 'hidden',
    opacity: 0,
    pointerEvents: 'none',
    margin: 'auto',
    transition: `150ms`,
}));
const CheckboxInput = styled_components_1.default.div(({ theme }) => ({
    position: 'relative',
    cursor: 'pointer',
    transition: `200ms`,
    boxSizing: 'border-box',
    border: `2px solid ${theme.COLOR.gray3}`,
    borderRadius: theme.RADIUS.s,
    width: '1.125rem',
    height: '1.125rem',
    backgroundColor: '#fff',
    userSelect: 'none',
    [`${Input}:focus + &`]: {
        borderColor: theme.COLOR.brandMain,
    },
    [`${Input}:checked:focus + &`]: {
        borderColor: theme.COLOR.gray5,
    },
    [`${Input}:checked + &`]: {
        backgroundColor: theme.COLOR.gray5,
        borderColor: theme.COLOR.brandMain,
    },
    [`${Input}:disabled + &`]: {
        borderColor: theme.COLOR.gray4,
    },
    [`${Input}:checked + & .checkIcon`]: {
        visibility: 'visible',
        opacity: 1,
    },
    '&.indeterminate': {
        borderColor: theme.COLOR.brandMain,
        '.minusIcon': {
            visibility: 'visible',
            opacity: 1,
            background: theme.COLOR.light,
        },
        '.checkIcon': {
            visibility: 'hidden',
            opacity: 0,
            background: theme.COLOR.light,
        },
    },
}));
const Checkbox = (_a) => {
    var { variant, margin, name, defaultChecked, checked, onChange, label, indeterminate } = _a, props = __rest(_a, ["variant", "margin", "name", "defaultChecked", "checked", "onChange", "label", "indeterminate"]);
    const Component = styled_components_1.default.label(({ theme }) => (Object.assign(Object.assign({}, (theme.CHECKBOX[variant] || {})), (margin && { margin: (0, utils_1.getMargin)({ theme, margin }) }))));
    const Label = (0, styled_components_1.default)(Flex_1.Flex)(({ theme }) => (Object.assign({}, (theme.CHECKBOX['labelMargin'] || {}))));
    const checkedProps = typeof checked !== 'undefined' ? { checked } : { defaultChecked };
    const handleChange = (e) => {
        if (onChange) {
            onChange(e.currentTarget.checked);
        }
    };
    return ((0, jsx_runtime_1.jsx)(Component, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, Object.assign({ variant: "raw" }, { children: [(0, jsx_runtime_1.jsx)(Input, Object.assign({}, props, checkedProps, { type: "checkbox", id: name, name: name, onChange: handleChange }), void 0), (0, jsx_runtime_1.jsxs)(CheckboxInput, Object.assign({}, (indeterminate ? { className: 'indeterminate' } : {}), { children: [(0, jsx_runtime_1.jsx)(MinusBoxIcon, { variant: "basic", size: "1.5em", icon: theme_1.polyIcons.MinusBox, className: "minusIcon" }, void 0), (0, jsx_runtime_1.jsx)(CheckStateIcon, { variant: "basic", size: "1.5em", icon: theme_1.polyIcons.CheckboxMarked, className: "checkIcon" }, void 0)] }), void 0), label && ((0, jsx_runtime_1.jsx)(Label, Object.assign({ variant: "raw" }, { children: (0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: name }, { children: label }), void 0) }), void 0))] }), void 0) }, void 0));
};
exports.Checkbox = Checkbox;
//# sourceMappingURL=Checkbox.js.map