"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UIList = void 0;
const react_1 = __importDefault(require("react"));
const react_2 = require("@fluentui/react");
const Icons_1 = require("../Icons");
require("./UIList.scss");
/**
 * UIList component
 * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/groupedlist
 *
 * @exports
 * @class UIList
 * @extends {React.Component<ListProps, {}>}
 */
class UIList extends react_1.default.Component {
    /**
     * Initializes component properties.
     *
     * @param {ListProps} props
     */
    constructor(props) {
        super(props);
        this.onGroupHeaderClick = (group) => {
            this.props.onSelect(group);
        };
    }
    /**
     * @returns {JSX.Element}
     */
    render() {
        const HeaderStyles = () => ({
            ...{
                root: [
                    {
                        cursor: 'pointer',
                        padding: '0 10px 0 10px',
                        selectors: {
                            '&:hover': {
                                backgroundColor: 'var(--vscode-dropdown-background)',
                                color: 'var(--vscode-dropdown-foreground)'
                            }
                        }
                    }
                ],
                groupHeaderContainer: {
                    height: 20
                },
                expandIsCollapsed: {
                    height: 16
                },
                expand: [
                    {
                        height: 20,
                        width: 30,
                        selectors: {
                            '&:hover': {
                                backgroundColor: 'var(--vscode-dropdown-background)',
                                color: 'var(--vscode-dropdown-foreground)'
                            },
                            '&:active': {
                                backgroundColor: 'var(--vscode-dropdown-background)',
                                color: 'var(--vscode-dropdown-foreground)'
                            }
                        }
                    }
                ],
                title: {
                    fontSize: 13,
                    fontWeight: 'normal',
                    paddingLeft: 0,
                    height: 20,
                    color: 'var(--vscode-settings-textInputForeground)'
                }
            }
        });
        const HeaderProps = {
            ...{
                root: {},
                expandButtonIcon: Icons_1.UiIcons.ArrowRight,
                expandButtonProps: {
                    style: {
                        width: 20,
                        paddingRight: 5
                    }
                },
                indentWidth: 10,
                styles: HeaderStyles,
                onGroupHeaderClick: this.onGroupHeaderClick
            }
        };
        const GroupeListStyles = () => ({
            ...{
                root: [
                    {
                        color: 'var(--vscode-dropdown-foreground)',
                        paddingTop: 10,
                        paddingBottom: 10,
                        selectors: {
                            '.ms-List-cell': {
                                minHeight: 20
                            }
                        }
                    }
                ]
            }
        });
        const GroupProps = {
            headerProps: HeaderProps,
            isAllGroupsCollapsed: true,
            ...this.props.groupProps
        };
        const ListProps = {};
        return (react_1.default.createElement(react_2.GroupedList, { ...this.props, className: "uiList", selectionMode: 0, compact: true, styles: GroupeListStyles, groupProps: GroupProps, listProps: ListProps }));
    }
}
exports.UIList = UIList;
//# sourceMappingURL=UIList.js.map