"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.VariantSelector = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
const AdaptableContext_1 = require("../AdaptableContext");
const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
const VariantSelector = (props) => {
    const adaptable = (0, AdaptableContext_1.useAdaptable)();
    const systemTemes = adaptable.api.themeApi
        .getSystemThemes()
        .filter((theme) => theme.Name !== GeneralConstants_1.OS_THEME);
    const options = systemTemes.map((theme) => ({
        label: theme.Description,
        value: theme.Name,
        onClick: () => props.onChange(theme.Name),
    }));
    const label = props.theme.Variant
        ? options.find((theme) => theme.value === props.theme.Variant)?.label
        : 'Select a theme';
    return (React.createElement(React.Fragment, null,
        React.createElement(DropdownButton_1.default, { className: "twa:mr-2", columns: ['label'], items: options, disabled: props.disabled }, label),
        React.createElement(SimpleButton_1.default, { onClick: () => props.onChange(null), disabled: !props.theme.Variant || props.disabled, hidden: props.disabled, icon: "delete" })));
};
exports.VariantSelector = VariantSelector;
