import * as React from 'react';
import clsx from 'clsx';
import { Flex } from '../Flex';
import { twMerge } from '../../twMerge';
export const ToggleButton = ({ checked, onChange, disabled, className, children, style = {}, 'data-name': dataName, }) => {
    const isChecked = Boolean(checked);
    const handleChange = (event) => {
        if (disabled) {
            return;
        }
        onChange(Boolean(event.target.checked));
    };
    const baseClassName = 'ab-ToggleButton';
    const preparedClassName = clsx(baseClassName, 'twa:group twa:outline-0', 'twa:select-none twa:relative twa:inline-block', 'twa:min-w-[40px]', 'twa:min-h-input', 'twa:w-[77px]', {
        [`${baseClassName}--checked`]: isChecked,
        [`${baseClassName}--disabled`]: disabled,
        'twa:hover:cursor-pointer twa:hover:opacity-85': !disabled,
    }, className);
    return (React.createElement("label", { "data-checked": isChecked, "data-name": dataName, style: style, className: twMerge(preparedClassName) },
        React.createElement("input", { type: "checkbox", disabled: disabled, checked: isChecked, className: clsx(`${baseClassName}__input`, 'twa:opacity-0 twa:size-0'), onChange: handleChange }),
        React.createElement(Flex, { alignItems: "center", "data-checked": isChecked, className: clsx(`${baseClassName}__slider`, 'twa:group:focus-within:ring-1 twa:group-focus-within:shadow-(--ab-focus__box-shadow)', 'twa:absolute twa:inset-0 twa:rounded-standard', {
                'twa:bg-(--ab-cmp-toggle-button__background)': !isChecked,
                'twa:bg-accent': isChecked,
                'twa:justify-start': isChecked,
                'twa:justify-end': !isChecked,
                'twa:opacity-50': disabled,
            }, 
            // the :before pseudo element
            'twa:before:absolute twa:before:content-[""] twa:before:size-[24px]', 'twa:before:rounded-standard twa:before:bg-white') },
            React.createElement("div", { className: clsx(`${baseClassName}__text`, 'twa:font-semibold', 'twa:pr-2', 'twa:text-1', {
                    'twa:text-(--ab-cmp-toggle-button__color)': !isChecked,
                    'twa:text-(--ab-cmp-toggle-button--checked__color)': isChecked,
                    'twa:pl-2': isChecked,
                }) }, children))));
};
