import React, { cloneElement, PureComponent, } from 'react';
import { withFocusable } from '../common/Focusable';
import { classes, st } from './ToggleButton.st.css.js';
import Tooltip from '../Tooltip';
import Text from '../Text';
import { dataHooks, iconChildSize, SHAPES } from './constants';
import { WixDesignSystemContext } from '../WixDesignSystemProvider/context';
import ButtonCore from '../Button/ButtonCore';
const Icon = ({ children, hasIcon, size, shape, border, labelPlacement, focusableOnBlur, focusableOnFocus, className, }) => {
    const iconSize = iconChildSize[size];
    const isLabelOutside = shape === 'round' &&
        (labelPlacement === 'end' || labelPlacement === 'start');
    const isLabelStart = labelPlacement === 'start';
    const isLabelEnd = labelPlacement === 'end' || (shape === 'pill' && !isLabelStart);
    const [first, second] = React.Children.map(children, child => child);
    const icon = isLabelStart ? second : first;
    const topOutsideLabel = isLabelOutside && isLabelStart ? first : null;
    const topInsideLabel = !isLabelOutside && isLabelStart ? first : null;
    const bottomInsideLabel = !isLabelOutside && isLabelEnd ? second : null;
    const bottomOutsideLabel = isLabelOutside && isLabelEnd ? second : null;
    // TODO page is scrolled whenever icon focused and we press Space button
    return (children && (React.createElement("span", { className: classes.labelContainer },
        topOutsideLabel,
        React.createElement("div", { className: st(classes.icon, { size, border }, className), onBlur: focusableOnBlur, onFocus: focusableOnFocus },
            topInsideLabel,
            cloneElement(icon, {
                className: st(classes.rootIcon, {
                    iconOnly: hasIcon && (!first || !second || shape === 'round'),
                }, icon.props?.className),
                width: iconSize,
                height: iconSize,
            }),
            bottomInsideLabel),
        bottomOutsideLabel)));
};
const ToggleButtonIcon = withFocusable(Icon);
class ToggleButton extends PureComponent {
    constructor() {
        super(...arguments);
        this.renderLabel = () => {
            const { disabled, size, labelValue, labelPlacement, labelEllipsis, shape } = this.props;
            return (React.createElement(Text, { className: st(classes.label, {
                    placement: shape !== SHAPES['pill'] && labelPlacement,
                    size,
                    shape,
                }), disabled: disabled, dataHook: dataHooks.label, weight: "thin", ellipsis: labelEllipsis }, labelValue));
        };
    }
    render() {
        const { children, size = ToggleButton.defaultProps.size, shape = ToggleButton.defaultProps.shape, skin, tooltipProps, labelValue, selected, interactive, dataHook, labelPlacement, labelEllipsis, disabled, border = ToggleButton.defaultProps.border, tooltipDisabled, className, ...rest } = this.props;
        const hasIcon = Boolean(children && React.Children.count(children) > 0);
        return (React.createElement(WixDesignSystemContext.Consumer, null, ({ mobile }) => (React.createElement(Tooltip, { className: st(classes.tooltip, { disabled, interactive }), ...tooltipProps, size: "small", content: labelValue, disabled: !labelValue ||
                tooltipDisabled ||
                tooltipProps?.disabled ||
                labelPlacement !== 'tooltip' ||
                shape === 'pill' ||
                mobile, "data-hook": dataHook },
            React.createElement(ButtonCore, { ...rest, type: undefined, onFocus: rest?.onFocus, onBlur: rest?.onBlur, className: st(classes.root, {
                    disabled,
                    selected,
                    interactive,
                    skin,
                    labelPlacement,
                    shape,
                    mobile,
                    size,
                    hasIcon,
                }, className), contentClassName: classes.btnContent, "data-hook": dataHooks.button, "data-placement": labelPlacement, "data-selected": selected, "data-skin": skin, "data-shape": shape, "aria-pressed": selected, disabled: disabled, "aria-label": labelValue?.toString() },
                React.createElement(ToggleButtonIcon, { hasIcon: hasIcon, size: size, shape: shape, border: border, labelPlacement: labelPlacement },
                    labelPlacement === 'start' ? this.renderLabel() : null,
                    children,
                    labelPlacement === 'end' ||
                        (shape === SHAPES['pill'] && labelPlacement !== 'start')
                        ? this.renderLabel()
                        : null),
                labelPlacement === 'bottom' && shape !== SHAPES['pill']
                    ? this.renderLabel()
                    : null)))));
    }
}
ToggleButton.displayName = 'ToggleButton';
ToggleButton.defaultProps = {
    skin: 'standard',
    size: 'medium',
    shape: 'square',
    border: false,
    interactive: true,
    disabled: false,
    labelValue: '',
    labelPlacement: 'tooltip',
    labelEllipsis: false,
    tooltipProps: {
        placement: 'top',
    },
};
export default ToggleButton;
//# sourceMappingURL=ToggleButton.js.map