"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UICheckbox = void 0;
const react_1 = __importDefault(require("react"));
const react_2 = require("@fluentui/react");
const ValidationMessage_1 = require("../../helper/ValidationMessage");
/**
 * UICheckbox component.
 * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/checkbox
 *
 * @exports
 * @class UICheckbox
 * @extends {React.Component<ICheckboxProps, {}>}
 */
class UICheckbox extends react_1.default.Component {
    /**
     * Initializes component properties.
     *
     * @param {UICheckboxProps} props
     */
    constructor(props) {
        super(props);
        this.GlobalClassNames = {
            root: 'ms-Checkbox',
            label: 'ms-Checkbox-label',
            checkbox: 'ms-Checkbox-checkbox',
            checkmark: 'ms-Checkbox-checkmark',
            text: 'ms-Checkbox-text'
        };
        this.setStyle = (messageInfo, props) => {
            return {
                root: [
                    !props.disabled && [
                        !props.checked && {
                            [`:hover .${this.GlobalClassNames.checkbox}`]: {
                                background: 'var(--vscode-checkbox-background)',
                                borderColor: 'var(--vscode-focusBorder)',
                                [react_2.HighContrastSelector]: {
                                    borderColor: 'Highlight'
                                }
                            },
                            [`:focus .${this.GlobalClassNames.checkbox}`]: {
                                background: 'var(--vscode-checkbox-background)',
                                borderColor: 'var(--vscode-focusBorder)'
                            },
                            [`:hover .${this.GlobalClassNames.checkmark}`]: {
                                color: 'var(--vscode-foreground)',
                                opacity: 0,
                                [react_2.HighContrastSelector]: {
                                    color: 'Highlight'
                                }
                            }
                        },
                        {
                            [`:hover .${this.GlobalClassNames.text}, :focus .${this.GlobalClassNames.text}`]: {
                                color: 'var(--vscode-foreground)',
                                [react_2.HighContrastSelector]: {
                                    color: props.disabled ? 'GrayText' : 'WindowText'
                                }
                            }
                        }
                    ],
                    props.checked &&
                        !props.indeterminate && {
                        [`:hover .${this.GlobalClassNames.checkbox}`]: {
                            background: props.disabled ? '' : 'var(--vscode-checkbox-background)',
                            borderColor: props.disabled ? '' : 'var(--vscode-focusBorder)'
                        },
                        [`:focus .${this.GlobalClassNames.checkbox}`]: {
                            background: 'var(--vscode-checkbox-background)',
                            borderColor: 'var(--vscode-focusBorder)'
                        },
                        [react_2.HighContrastSelector]: {
                            [`:hover .${this.GlobalClassNames.checkbox}`]: {
                                background: 'Highlight',
                                borderColor: 'Highlight'
                            },
                            [`:focus .${this.GlobalClassNames.checkbox}`]: {
                                background: 'Highlight'
                            },
                            [`:focus:hover .${this.GlobalClassNames.checkbox}`]: {
                                background: 'Highlight'
                            },
                            [`:focus:hover .${this.GlobalClassNames.checkmark}`]: {
                                color: 'Window'
                            },
                            [`:hover .${this.GlobalClassNames.checkmark}`]: {
                                color: 'Window'
                            }
                        }
                    },
                    messageInfo.message && {
                        marginBottom: 2
                    }
                ],
                input: {
                    [`.${react_2.IsFocusVisibleClassName} &:focus + label::before`]: {
                        content: '',
                        position: 'absolute',
                        inset: -1,
                        border: '1px solid transparent !important',
                        outline: '1px solid var(--vscode-focusBorder) !important',
                        [react_2.HighContrastSelector]: {
                            outline: '1px solid WindowText'
                        }
                    }
                },
                checkbox: {
                    backgroundColor: 'var(--vscode-debugToolBar-background, var(--vscode-editorWidget-background))',
                    borderColor: 'var(--vscode-editorWidget-border)',
                    opacity: props.disabled ? 0.4 : undefined
                },
                checkmark: {
                    color: 'var(--vscode-checkbox-foreground, var(--vscode-editorWidget-foreground))'
                },
                text: {
                    color: 'var(--vscode-foreground)',
                    opacity: props.disabled ? 0.4 : undefined
                }
            };
        };
    }
    /**
     * @returns {JSX.Element}
     */
    render() {
        const messageInfo = (0, ValidationMessage_1.getMessageInfo)(this.props);
        const checkboxComponent = (react_1.default.createElement(react_2.Checkbox, { ...this.props, styles: (props) => {
                return { ...this.setStyle(messageInfo, props), ...this.props.styles };
            } }));
        return messageInfo.message ? (react_1.default.createElement(ValidationMessage_1.MessageWrapper, { message: messageInfo }, checkboxComponent)) : (checkboxComponent);
    }
}
exports.UICheckbox = UICheckbox;
//# sourceMappingURL=UICheckbox.js.map