import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import classNames from 'classnames';
import './Toggle.scss';
import Icon from '../Icon';
const Toggle = ({ onChange, variant = 'primary', disabled, checked = false, id = 'toggle', size = 'large', icon, }) => {
    const handleChange = (e) => {
        if (onChange) {
            onChange(e);
        }
    };
    const baseIconSizes = {
        large: 10,
        medium: 8,
        small: 6,
    };
    const defaultIconSize = baseIconSizes[size];
    const defaultIcons = {
        checked: {
            name: 'check_mark',
            width: defaultIconSize,
            height: defaultIconSize,
        },
        unchecked: {
            name: 'wrong_mark',
            width: defaultIconSize,
            height: defaultIconSize,
        },
    };
    const iconNames = {
        checked: { ...defaultIcons.checked, ...icon?.checked },
        unchecked: { ...defaultIcons.unchecked, ...icon?.unchecked },
    };
    return (_jsxs("div", { className: "ff--switch-container", children: [_jsx("input", { className: "ff--switch-checkbox", id: `ff-toggle-${id}`, type: "checkbox", disabled: !!disabled, onChange: handleChange, checked: checked }), _jsx("label", { className: classNames(`ff--switch-label default--${size} ff--switch-label--${variant}`, {
                    'ff--switch-label--disabled': disabled,
                }), htmlFor: `ff-toggle-${id}`, children: _jsx("span", { className: classNames(`ff--switch-button ff--switch-button--${size}`, {
                        checked: checked,
                    }), children: checked ? (_jsx(Icon, { name: iconNames.checked.name, width: iconNames.checked.width, height: iconNames.checked.height, className: `ff-checked-icon--${variant}` })) : (_jsx(Icon, { name: iconNames.unchecked.name, width: iconNames.unchecked.width, height: iconNames.unchecked.height, className: `ff-unchecked-icon--${variant}` })) }) })] }));
};
export default Toggle;
//# sourceMappingURL=Toggle.js.map