"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 () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __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.Switch = void 0;
const react_1 = __importStar(require("react"));
const loader_1 = require("../../loader");
const typography_1 = require("../../typography");
const utils_external_1 = require("../../utils-external");
const helpers_1 = require("../../utils/helpers");
const ReadOnlyIcon_1 = require("../ReadOnlyIcon");
const useFormField_1 = require("../useFormField");
/**
 * A component that displays a switch input field.
 *
 * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/switch)
 * @see 🏷️ {@link SwitchProps}
 *
 * @example
 * ```jsx
 * <Switch>Varsle med SMS</Switch>
 * ```
 */
exports.Switch = (0, react_1.forwardRef)((props, ref) => {
    var _a, _b, _c;
    const { inputProps, size, readOnly } = (0, useFormField_1.useFormField)(props, "switch");
    const { children, className, description, hideLabel = false, loading, checked: checkedProp, defaultChecked, position = "left" } = props, rest = __rest(props, ["children", "className", "description", "hideLabel", "loading", "checked", "defaultChecked", "position"]);
    const [_checked, setChecked] = (0, react_1.useState)((_a = defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : checkedProp) !== null && _a !== void 0 ? _a : false);
    if (checkedProp !== undefined && checkedProp !== _checked) {
        setChecked(checkedProp);
    }
    const checked = checkedProp !== null && checkedProp !== void 0 ? checkedProp : _checked;
    return (react_1.default.createElement("div", { className: (0, helpers_1.cl)("aksel-switch", props.className, `aksel-switch--${size}`, `aksel-switch--${position}`, {
            "aksel-switch--loading": loading,
            "aksel-switch--disabled": (_b = inputProps.disabled) !== null && _b !== void 0 ? _b : loading,
            "aksel-switch--readonly": readOnly,
            "aksel-switch--standalone": hideLabel,
        }) },
        react_1.default.createElement("input", Object.assign({}, (0, utils_external_1.omit)(rest, ["size", "readOnly"]), (0, utils_external_1.omit)(inputProps, ["aria-invalid", "aria-describedby"]), { disabled: (_c = inputProps.disabled) !== null && _c !== void 0 ? _c : loading, checked: checkedProp, defaultChecked: defaultChecked, ref: ref, type: "checkbox", onChange: (event) => {
                var _a;
                if (readOnly) {
                    return;
                }
                setChecked(event.target.checked);
                (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, event);
            }, onClick: (event) => {
                var _a;
                if (readOnly) {
                    event.preventDefault();
                    return;
                }
                (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
            }, className: (0, helpers_1.cl)(className, "aksel-switch__input") })),
        react_1.default.createElement("span", { className: "aksel-switch__track" },
            react_1.default.createElement("span", { className: "aksel-switch__thumb" },
                react_1.default.createElement(SwitchIcon, { size: size, checked: checked, loading: loading }))),
        react_1.default.createElement("label", { htmlFor: inputProps.id, className: "aksel-switch__label-wrapper" },
            react_1.default.createElement("span", { className: (0, helpers_1.cl)("aksel-switch__content", {
                    "aksel-sr-only": hideLabel,
                    "aksel-switch--with-description": description && !hideLabel,
                }) },
                react_1.default.createElement(typography_1.BodyShort, { as: "span", size: size, className: "aksel-switch__label" },
                    readOnly && react_1.default.createElement(ReadOnlyIcon_1.ReadOnlyIconWithTitle, null),
                    children),
                description && (react_1.default.createElement(typography_1.BodyShort, { size: size, as: "span", className: "aksel-form-field__subdescription aksel-switch__description" }, description))))));
});
const SwitchIcon = ({ size, checked, loading, }) => {
    if (loading) {
        let baseSize = 16;
        if (size === "small") {
            baseSize = 12;
        }
        if (checked) {
            baseSize += 2;
        }
        return (react_1.default.createElement(loader_1.Loader, { size: "small", "aria-live": "polite", variant: checked ? "interaction" : "inverted", width: `${baseSize / 16}rem`, height: `${baseSize / 16}rem` }));
    }
    if (!checked) {
        return null;
    }
    if (size === "small") {
        return (react_1.default.createElement("svg", { width: "11", height: "8", viewBox: "0 0 11 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", focusable: false, role: "img", "aria-hidden": true },
            react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.62013 0.530226C10.1194 0.952686 10.1817 1.6999 9.7592 2.19917L5.4171 7.33075C5.20318 7.58356 4.89318 7.73525 4.5623 7.74901C4.23142 7.76277 3.90989 7.63735 3.67572 7.40318L1.3073 5.03476C0.844833 4.5723 0.844833 3.8225 1.3073 3.36003C1.76976 2.89757 2.51956 2.89757 2.98202 3.36003L4.4404 4.81841L7.95118 0.669304C8.37364 0.170033 9.12085 0.107765 9.62013 0.530226Z", fill: "currentColor" })));
    }
    return (react_1.default.createElement("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", focusable: false, role: "img", "aria-hidden": true },
        react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.2674 0.647802C11.8762 1.20971 11.9141 2.1587 11.3522 2.76743L5.35221 9.26743C5.07531 9.56739 4.68813 9.74155 4.27998 9.74971C3.87184 9.75787 3.478 9.59933 3.18934 9.31067L0.68934 6.81067C0.103553 6.22488 0.103553 5.27513 0.68934 4.68935C1.27513 4.10356 2.22487 4.10356 2.81066 4.68935L4.20673 6.08541L9.14779 0.732587C9.7097 0.123856 10.6587 0.0858967 11.2674 0.647802Z", fill: "currentColor" })));
};
exports.default = exports.Switch;
//# sourceMappingURL=Switch.js.map