import React, { PureComponent } from 'react';
import { CheckboxChecked, CheckboxIndeterminate, } from '@wix/wix-ui-icons-common/system';
import { st, classes } from './Checkbox.st.css.js';
import Text from '../Text';
import { withFocusable } from '../common/Focusable';
import { generateID } from '../utils/generateId';
import Tooltip from '../Tooltip';
import * as DATA_ATTR from './DataAttr';
import { dataHooks, LABEL_TEXT_SIZE, SELECTION_AREA, V_ALIGN, SELECTION_AREA_SKIN, } from './constants';
import { ZIndex } from '../common/ZIndex';
import semanticClassNames from './Checkbox.semanticClassNames';
import { classes as commonClasses } from '../common/styles/visuallyHidden.st.css.js';
/** a simple WixStyle checkbox */
export class Checkbox extends PureComponent {
    constructor() {
        super(...arguments);
        // TODO fix me please. We need to get away from ids.
        this._id = `${Checkbox.displayName}-${generateID()}`;
        this.checkboxRef = React.createRef();
        this.inputRef = React.createRef();
        this.focus = () => {
            this.inputRef.current && this.inputRef.current.focus();
        };
        this._handleChange = (event) => {
            this.props.onChange?.(event);
        };
        this._getDataAttributes = () => {
            const { checked, indeterminate, disabled, hasError } = this.props;
            return {
                [DATA_ATTR.DATA_CHECK_TYPE]: indeterminate
                    ? DATA_ATTR.CHECK_TYPES.INDETERMINATE
                    : checked
                        ? DATA_ATTR.CHECK_TYPES.CHECKED
                        : DATA_ATTR.CHECK_TYPES.UNCHECKED,
                [DATA_ATTR.DATA_HAS_ERROR]: hasError && !disabled,
                [DATA_ATTR.DATA_DISABLED]: disabled,
            };
        };
    }
    render() {
        const { id = this._id, checked, indeterminate, disabled, required, hasError, errorMessage, onChange, selectionArea, vAlign, size, children, dataHook, focusableOnFocus, focusableOnBlur, className, tooltipProps, tooltipContent, selectionAreaSkin, selectionAreaPadding, ellipsis, maxLines, } = this.props;
        const isTooltipDisabled = (tooltipProps && tooltipProps.disabled) ||
            disabled ||
            (!tooltipContent && (!hasError || !errorMessage));
        return (React.createElement("div", { "data-hook": dataHook, className: st(classes.root, {
                vAlign,
                selectionArea,
                selectionAreaSkin,
                disabled,
                size,
                error: hasError && !disabled,
                selection: indeterminate
                    ? 'indeterminate'
                    : checked
                        ? 'checked'
                        : 'unchecked',
                indeterminate,
                ellipsis,
            }, className), ...this._getDataAttributes() },
            React.createElement("input", { ref: this.inputRef, className: commonClasses.visuallyHidden, "data-hook": dataHooks.input, type: "checkbox", id: id, checked: checked, disabled: disabled, required: required, "aria-checked": indeterminate ? 'mixed' : checked, onChange: onChange, onFocus: focusableOnFocus, onBlur: focusableOnBlur }),
            React.createElement("label", { htmlFor: id, "data-hook": dataHooks.label, className: classes.label, onClick: e => e.stopPropagation() },
                React.createElement("div", { className: classes.labelInner, style: { padding: selectionAreaPadding } },
                    React.createElement(Tooltip, { dataHook: dataHooks.boxTooltip, disabled: isTooltipDisabled, content: tooltipContent || errorMessage || ' ', textAlign: "center", maxWidth: 230, exitDelay: 150, zIndex: ZIndex.checkbox, ...tooltipProps },
                        React.createElement("div", { className: classes.outer },
                            React.createElement("div", { "data-hook": dataHooks.box, className: st(classes.checkbox, semanticClassNames.inputContainer) },
                                React.createElement("div", { className: classes.inner }, indeterminate ? (React.createElement(CheckboxIndeterminate, null)) : (React.createElement(CheckboxChecked, null)))))),
                    children && (React.createElement(Text, { size: size, weight: "thin", dataHook: dataHooks.children, className: classes.children, ellipsis: ellipsis, maxLines: maxLines }, children))))));
    }
}
Checkbox.displayName = 'Checkbox';
Checkbox.defaultProps = {
    checked: false,
    size: LABEL_TEXT_SIZE.MEDIUM,
    selectionArea: SELECTION_AREA.NONE,
    vAlign: V_ALIGN.CENTER,
    onChange: (e) => e.stopPropagation(),
    hasError: false,
    disabled: false,
    indeterminate: false,
    selectionAreaSkin: SELECTION_AREA_SKIN.FILLED,
};
export default withFocusable(Checkbox);
//# sourceMappingURL=Checkbox.js.map