import { __decorate, __extends, __metadata } from "tslib";
import { Component, Prop } from 'vue-property-decorator';
import { mergeStyleSets } from '@uifabric/styling';
import { getStyles as getActionButtonStyles } from '../../Button/ActionButton/ActionButton.styles';
import { memoizeFunction, classNamesFunction } from '@uifabric-vue/utilities';
import BaseComponent from '../../BaseComponent';
import { getColorFromString, GridCell } from '../../../utilities';
var getColorPickerGridCellButtonClassNames = memoizeFunction(function (theme, className, variantClassName, iconClassName, menuIconClassName, disabled, checked, expanded, isSplit) {
    var styles = getActionButtonStyles(theme);
    return mergeStyleSets({
        root: [
            'ms-Button',
            styles.root,
            variantClassName,
            className,
            checked && ['is-checked', styles.rootChecked],
            disabled && ['is-disabled', styles.rootDisabled],
            !disabled &&
                !checked && {
                selectors: {
                    ':hover': styles.rootHovered,
                    ':focus': styles.rootFocused,
                    ':active': styles.rootPressed,
                },
            },
            disabled && checked && [styles.rootCheckedDisabled],
            !disabled &&
                checked && {
                selectors: {
                    ':hover': styles.rootCheckedHovered,
                    ':active': styles.rootCheckedPressed,
                },
            },
        ],
        flexContainer: ['ms-Button-flexContainer', styles.flexContainer],
    });
});
var getClassNames = classNamesFunction();
var ColorPickerGridCellBase = /** @class */ (function (_super) {
    __extends(ColorPickerGridCellBase, _super);
    function ColorPickerGridCellBase() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Object.defineProperty(ColorPickerGridCellBase.prototype, "classNames", {
        get: function () {
            var _a = this, styles = _a.styles, theme = _a.theme, circle = _a.circle, color = _a.color, disabled = _a.disabled, selected = _a.selected, height = _a.height, width = _a.width, borderWidth = _a.borderWidth;
            return getClassNames(styles, {
                theme: theme,
                disabled: disabled,
                selected: selected,
                circle: circle,
                isWhite: this.isWhiteCell(color),
                height: height,
                width: width,
                borderWidth: borderWidth,
            });
        },
        enumerable: false,
        configurable: true
    });
    ColorPickerGridCellBase.prototype.isWhiteCell = function (inputColor) {
        var color = getColorFromString(inputColor);
        return color.hex === 'ffffff';
    };
    ColorPickerGridCellBase.prototype.render = function (h) {
        var _a = this, classNames = _a.classNames, color = _a.color, circle = _a.circle;
        return h(GridCell, {
            class: classNames.colorCell,
        }, [
            h('svg', {
                class: classNames.svg,
                attrs: {
                    viewBox: '0 0 20 20',
                    fill: getColorFromString(color).str,
                },
            }, [
                circle
                    ? h('circle', { attrs: { cx: '50%', cy: '50%', r: '50% ' } })
                    : h('rect', { attrs: { width: '100%', height: '100%' } }),
            ]),
        ]);
    };
    __decorate([
        Prop({ type: Boolean, default: true }),
        __metadata("design:type", Boolean)
    ], ColorPickerGridCellBase.prototype, "circle", void 0);
    __decorate([
        Prop({ type: String }),
        __metadata("design:type", String)
    ], ColorPickerGridCellBase.prototype, "color", void 0);
    __decorate([
        Prop({ type: Boolean }),
        __metadata("design:type", Boolean)
    ], ColorPickerGridCellBase.prototype, "disabled", void 0);
    __decorate([
        Prop({ type: Boolean }),
        __metadata("design:type", Boolean)
    ], ColorPickerGridCellBase.prototype, "selected", void 0);
    __decorate([
        Prop({ type: Number, default: 20 }),
        __metadata("design:type", Number)
    ], ColorPickerGridCellBase.prototype, "height", void 0);
    __decorate([
        Prop({ type: Number, default: 20 }),
        __metadata("design:type", Number)
    ], ColorPickerGridCellBase.prototype, "width", void 0);
    __decorate([
        Prop({ type: Number, default: 2 }),
        __metadata("design:type", Number)
    ], ColorPickerGridCellBase.prototype, "borderWidth", void 0);
    ColorPickerGridCellBase = __decorate([
        Component({
            components: { GridCell: GridCell },
        })
    ], ColorPickerGridCellBase);
    return ColorPickerGridCellBase;
}(BaseComponent));
export { ColorPickerGridCellBase };
//# sourceMappingURL=ColorPickerGridCell.base.js.map