"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var colors_1 = require("../../utilities/color/colors");
var GridCell_1 = require("../../utilities/grid/GridCell");
var ActionButton_styles_1 = require("../Button/ActionButton/ActionButton.styles");
var Styling_1 = require("../../Styling");
var Utilities_2 = require("../../Utilities");
var getClassNames = Utilities_2.classNamesFunction();
var ColorCell = /** @class */ (function (_super) {
    tslib_1.__extends(ColorCell, _super);
    function ColorCell() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    return ColorCell;
}(GridCell_1.GridCell));
var ColorPickerGridCellBase = /** @class */ (function (_super) {
    tslib_1.__extends(ColorPickerGridCellBase, _super);
    function ColorPickerGridCellBase() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        /**
         * Render the core of a color cell
         * @returns {JSX.Element} - Element representing the core of the item
         */
        _this._onRenderColorOption = function (colorOption) {
            // Build an SVG for the cell with the given shape and color properties
            return (React.createElement("svg", { className: _this._classNames.svg, viewBox: "0 0 20 20", fill: colors_1.getColorFromString(colorOption.color).str }, _this.props.circle ? React.createElement("circle", { cx: "50%", cy: "50%", r: "50%" }) : React.createElement("rect", { width: "100%", height: "100%" })));
        };
        /**
         * Method to override the getClassNames func in a button.
         */
        _this._getClassNames = function (theme, className, variantClassName, iconClassName, menuIconClassName, disabled, checked, expanded, isSplit) {
            var styles = ActionButton_styles_1.getStyles(theme);
            return Styling_1.mergeStyleSets(_this._classNames, {
                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]
            });
        };
        return _this;
    }
    ColorPickerGridCellBase.prototype.render = function () {
        var _a = this.props, item = _a.item, id = _a.id, selected = _a.selected, disabled = _a.disabled, styles = _a.styles, theme = _a.theme, circle = _a.circle, color = _a.color, onClick = _a.onClick, onHover = _a.onHover, onFocus = _a.onFocus, onMouseEnter = _a.onMouseEnter, onMouseMove = _a.onMouseMove, onMouseLeave = _a.onMouseLeave, onWheel = _a.onWheel, onKeyDown = _a.onKeyDown;
        this._classNames = getClassNames(styles, {
            theme: theme,
            disabled: disabled,
            selected: selected,
            circle: circle,
            isWhite: this._isWhiteCell(color)
        });
        return (React.createElement(ColorCell, { item: item, id: id + "-" + item.id + "-" + item.index, key: item.id, disabled: disabled, role: 'gridcell', onRenderItem: this._onRenderColorOption, selected: selected, onClick: onClick, onHover: onHover, onFocus: onFocus, label: item.label, className: this._classNames.colorCell, getClassNames: this._getClassNames, index: item.index, onMouseEnter: onMouseEnter, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onWheel: onWheel, onKeyDown: onKeyDown }));
    };
    /**
     * Validate if the cell's color is white or not to apply whiteCell style
     * @param inputColor - The color of the current cell
     * @returns - Whether the cell's color is white or not.
     */
    ColorPickerGridCellBase.prototype._isWhiteCell = function (inputColor) {
        return inputColor.toLocaleLowerCase() === '#ffffff';
    };
    ColorPickerGridCellBase.defaultProps = {
        circle: true,
        disabled: false,
        selected: false
    };
    ColorPickerGridCellBase = tslib_1.__decorate([
        Utilities_1.customizable('ColorPickerGridCell', ['theme', 'styles'])
    ], ColorPickerGridCellBase);
    return ColorPickerGridCellBase;
}(React.Component));
exports.ColorPickerGridCellBase = ColorPickerGridCellBase;
//# sourceMappingURL=ColorPickerGridCell.base.js.map