"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UIChoiceGroup = void 0;
const react_1 = __importDefault(require("react"));
const react_2 = require("@fluentui/react");
const UILabel_1 = require("../UILabel");
const types_1 = require("../types");
// Reusable styles
const UI_CHOICE_GROUP_LABEL_STYLE = {
    fontSize: 13,
    disableOpacity: 0.4
};
const UI_CHOICE_GROUP_STYLES = {
    label: {
        ...UI_CHOICE_GROUP_LABEL_STYLE,
        color: 'var(--vscode-input-foreground)'
    },
    radio: {
        borderColor: 'var(--vscode-editorWidget-border)',
        background: 'var(--vscode-input-background)',
        bullet: {
            background: 'var(--vscode-input-foreground)'
        },
        hover: {
            background: 'var(--vscode-focusBorder)'
        },
        focus: {
            borderColor: 'var(--vscode-focusBorder)'
        },
        label: {
            ...UI_CHOICE_GROUP_LABEL_STYLE,
            color: 'var(--vscode-foreground)'
        }
    }
};
/**
 * UIChoiceGroup component.
 * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/choicegroup
 *
 * @exports
 * @class UIChoiceGroup
 * @extends {React.Component<IChoiceGroupProps, {}>}
 */
class UIChoiceGroup extends react_1.default.Component {
    /**
     * Initializes component properties.
     *
     * @param {ChoiceGroupProps} props
     */
    constructor(props) {
        super(props);
        this.setStyles = () => {
            return {
                root: {
                    // Label
                    '.ms-ChoiceFieldGroup label.ms-Label': {
                        fontWeight: 'bold',
                        fontSize: UI_CHOICE_GROUP_STYLES.label.fontSize,
                        fontStyle: 'normal',
                        lineHeight: 15,
                        color: UI_CHOICE_GROUP_STYLES.label.color,
                        marginTop: 10,
                        padding: 0
                    },
                    // Choice/Radio field
                    '.ms-ChoiceField': {
                        minHeight: 20
                    },
                    '.ms-ChoiceField-field': {
                        fontWeight: 'normal',
                        fontSize: UI_CHOICE_GROUP_STYLES.radio.label.fontSize,
                        fontStyle: 'normal',
                        lineHeight: 18,
                        color: UI_CHOICE_GROUP_STYLES.radio.label.color,
                        margin: 0
                    },
                    '.ms-ChoiceField-field::before': {
                        backgroundColor: UI_CHOICE_GROUP_STYLES.radio.background,
                        borderColor: UI_CHOICE_GROUP_STYLES.radio.borderColor,
                        top: 0,
                        left: 0,
                        width: 18,
                        height: 18
                    },
                    '.ms-ChoiceField-field::after': {
                        left: 5,
                        top: 5,
                        height: 8,
                        width: 8,
                        borderWidth: 4,
                        backgroundColor: UI_CHOICE_GROUP_STYLES.radio.background,
                        // Remove animation
                        transition: 'none'
                    },
                    // Option Label
                    '.ms-ChoiceFieldLabel': {
                        paddingLeft: 26
                    },
                    // Checked/Selected
                    '.ms-ChoiceField-field.is-checked::after': {
                        borderColor: UI_CHOICE_GROUP_STYLES.radio.bullet.background
                    },
                    // Hover
                    '.ms-ChoiceField-field:hover': {
                        'span.ms-ChoiceFieldLabel': {
                            color: UI_CHOICE_GROUP_STYLES.radio.label.color
                        },
                        '::before': {
                            borderColor: UI_CHOICE_GROUP_STYLES.radio.hover.background
                        },
                        '::after': {
                            borderColor: 'transparent',
                            background: 'transparent'
                        }
                    },
                    // Hover + selected
                    'label.ms-ChoiceField-field.is-checked:hover::after': {
                        borderColor: UI_CHOICE_GROUP_STYLES.radio.bullet.background
                    },
                    // Focus
                    '.ms-ChoiceField-wrapper.is-inFocus::after': {
                        borderColor: UI_CHOICE_GROUP_STYLES.radio.focus.borderColor
                    },
                    '.ms-ChoiceField-input:focus': {
                        opacity: 0
                    },
                    // Disabled State
                    '.is-disabled + .ms-ChoiceField-field': {
                        ' .ms-ChoiceFieldLabel': {
                            opacity: UI_CHOICE_GROUP_STYLES.radio.label.disableOpacity,
                            color: UI_CHOICE_GROUP_STYLES.radio.label.color
                        },
                        ':hover::before': {
                            borderColor: UI_CHOICE_GROUP_STYLES.radio.borderColor
                        },
                        ':after': {
                            opacity: UI_CHOICE_GROUP_STYLES.radio.label.disableOpacity
                        }
                    }
                },
                label: {
                    ...UILabel_1.labelGlobalStyle,
                    ...(this.props.disabled && {
                        opacity: UI_CHOICE_GROUP_STYLES.label.disableOpacity,
                        color: UI_CHOICE_GROUP_STYLES.label.color
                    }),
                    ...(this.props.required && {
                        selectors: {
                            '::after': {
                                content: types_1.REQUIRED_LABEL_INDICATOR,
                                color: 'var(--vscode-inputValidation-errorBorder)',
                                paddingRight: 12
                            }
                        }
                    })
                },
                ...(this.props.inline && {
                    flexContainer: {
                        display: 'flex',
                        flexDirection: 'row',
                        flexWrap: 'wrap',
                        selectors: {
                            '> .ms-ChoiceField': {
                                paddingRight: 16
                            }
                        }
                    }
                })
            };
        };
    }
    /**
     * @returns {JSX.Element}
     */
    render() {
        return react_1.default.createElement(react_2.ChoiceGroup, { styles: this.setStyles, ...this.props });
    }
}
exports.UIChoiceGroup = UIChoiceGroup;
//# sourceMappingURL=UIChoiceGroup.js.map