"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UISearchBox = void 0;
const react_1 = __importDefault(require("react"));
const react_2 = require("@fluentui/react");
const UIInput_1 = require("../UIInput");
/**
 * UISearchBox component
 * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/searchbox
 *
 * @exports
 * @class UISearchBox
 * @extends {React.Component<ISearchBoxProps, {}>}
 */
class UISearchBox extends react_1.default.Component {
    /**
     * Initializes component properties.
     *
     * @param {ISearchBoxProps} props
     */
    constructor(props) {
        super(props);
    }
    /**
     * @returns {JSX.Element}
     */
    render() {
        const searchBoxStyles = (props) => ({
            ...{
                root: [
                    {
                        fontSize: 13,
                        backgroundColor: 'var(--vscode-input-background)',
                        border: '1px solid var(--vscode-editorWidget-border)',
                        borderRadius: UIInput_1.COMMON_INPUT_STYLES.borderRadius,
                        height: 22,
                        width: '100%',
                        boxSizing: 'initial',
                        selectors: {
                            '&:hover': {
                                border: '1px solid var(--vscode-focusBorder)'
                            }
                        }
                    },
                    props.hasFocus && {
                        selectors: {
                            ':after': {
                                border: `1px solid var(--vscode-focusBorder)`,
                                inset: -1,
                                borderRadius: UIInput_1.COMMON_INPUT_STYLES.borderRadius
                            }
                        }
                    },
                    props.disabled && {
                        color: 'var(--vscode-input-foreground)',
                        opacity: 0.4,
                        backgroundColor: 'var(--vscode-input-background)',
                        borderColor: 'var(--vscode-input-background)',
                        borderRadius: UIInput_1.COMMON_INPUT_STYLES.borderRadius,
                        height: 22,
                        maxHeight: 22,
                        minHeight: 22,
                        boxSizing: 'initial'
                    }
                ],
                field: [
                    {
                        backgroundColor: 'var(--vscode-input-background)',
                        color: 'var(--vscode-input-foreground)',
                        lineHeight: 22,
                        height: 22,
                        maxHeight: 22,
                        minHeight: 22,
                        fontSize: 13,
                        fontWeight: 'normal',
                        boxSizing: 'border-box',
                        borderRadius: UIInput_1.COMMON_INPUT_STYLES.borderRadius,
                        selectors: {
                            '::placeholder': {
                                color: 'var(--vscode-input-placeholderForeground)'
                            }
                        }
                    },
                    {
                        [':focus']: {
                            outline: 0
                        }
                    },
                    props.hasFocus && {
                        selectors: {
                            ':after': {
                                border: `1px solid var(--vscode-focusBorder')`
                            }
                        }
                    }
                ],
                iconContainer: [
                    {
                        alignItems: 'flex-start',
                        marginLeft: 5,
                        height: 16,
                        width: 23,
                        cursor: 'text',
                        paddingTop: 5,
                        transition: 'width 0.167s ease 0s',
                        selectors: {
                            svg: {
                                width: 16
                            },
                            'svg > g': {
                                fill: 'var(--vscode-foreground)'
                            }
                        }
                    },
                    props.hasFocus && {
                        width: 0,
                        marginLeft: 5
                    }
                ],
                clearButton: [
                    {
                        display: 'flex',
                        flexDirection: 'row',
                        alignItems: 'stretch',
                        cursor: 'pointer',
                        flexBasis: '16px',
                        flexShrink: 0,
                        padding: 0,
                        margin: '-1px 0px',
                        selectors: {
                            '&:hover .ms-Button': {
                                backgroundColor: 'var(--vscode-input-background)'
                            },
                            '&:hover .ms-Button-icon': {
                                color: 'var(--vscode-input-foreground)'
                            },
                            '.ms-Button': {
                                borderRadius: 0
                            },
                            '.ms-Button-icon': {
                                color: 'var(--vscode-input-foreground)'
                            }
                        }
                    }
                ]
            }
        });
        return react_1.default.createElement(react_2.SearchBox, { ...this.props, styles: searchBoxStyles });
    }
}
exports.UISearchBox = UISearchBox;
//# sourceMappingURL=UISearchBox.js.map