"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Grid_1 = require("../../utilities/grid/Grid");
var ColorPickerGridCell_1 = require("./ColorPickerGridCell");
var getClassNames = Utilities_1.classNamesFunction();
var SwatchColorPickerBase = /** @class */ (function (_super) {
    tslib_1.__extends(SwatchColorPickerBase, _super);
    function SwatchColorPickerBase(props) {
        var _this = _super.call(this, props) || this;
        _this._id = props.id || Utilities_1.getId('swatchColorPicker');
        var selectedIndex;
        if (props.selectedId) {
            selectedIndex = _this._getSelectedIndex(props.colorCells, props.selectedId);
        }
        _this.state = {
            selectedIndex: selectedIndex
        };
        return _this;
    }
    SwatchColorPickerBase.prototype.componentWillReceiveProps = function (newProps) {
        var newSelectedIndex;
        if (newProps.selectedId) {
            newSelectedIndex = this._getSelectedIndex(newProps.colorCells, newProps.selectedId);
        }
        if (newSelectedIndex !== this.state.selectedIndex) {
            this.setState({
                selectedIndex: newSelectedIndex
            });
        }
    };
    SwatchColorPickerBase.prototype.render = function () {
        var _a = this.props, colorCells = _a.colorCells, columnCount = _a.columnCount, positionInSet = _a.positionInSet, setSize = _a.setSize, shouldFocusCircularNavigate = _a.shouldFocusCircularNavigate, className = _a.className, doNotContainWithinFocusZone = _a.doNotContainWithinFocusZone, disabled = _a.disabled, getStyles = _a.getStyles;
        var classNames = getClassNames(getStyles, {
            theme: this.props.theme,
            className: className,
        });
        if (colorCells.length < 1 || columnCount < 1) {
            return null;
        }
        return (React.createElement(Grid_1.Grid, tslib_1.__assign({}, this.props, { items: colorCells.map(function (item, index) { return tslib_1.__assign({}, item, { index: index }); }), columnCount: columnCount, onRenderItem: this._renderOption, positionInSet: positionInSet && positionInSet, setSize: setSize && setSize, shouldFocusCircularNavigate: shouldFocusCircularNavigate, doNotContainWithinFocusZone: doNotContainWithinFocusZone, onBlur: this._onSwatchColorPickerBlur, theme: this.props.theme, 
            // tslint:disable-next-line:jsx-no-lambda
            getStyles: function (props) { return ({
                root: classNames.root,
                tableCell: classNames.tableCell,
                focusedContainer: classNames.focusedContainer
            }); } })));
    };
    /**
     * When the whole swatchColorPicker is blurred,
     * make sure to clear the pending focused stated
     */
    SwatchColorPickerBase.prototype._onSwatchColorPickerBlur = function () {
        if (this.props.onCellFocused) {
            this.props.onCellFocused();
        }
    };
    /**
     * Get the selected item's index
     * @param items - The items to search
     * @param selectedId - The selected item's id to find
     * @returns {number} - The index of the selected item's id, -1 if there was no match
     */
    SwatchColorPickerBase.prototype._getSelectedIndex = function (items, selectedId) {
        var selectedIndex = Utilities_1.findIndex(items, (function (item) { return (item.id === selectedId); }));
        return selectedIndex >= 0 ? selectedIndex : undefined;
    };
    SwatchColorPickerBase.prototype._isSelected = function (index) {
        return this.state.selectedIndex !== undefined && (this.state.selectedIndex === index);
    };
    /**
     * Render a color cell
     * @param item - The item to render
     * @returns {JSX.Element} - Element representing the item
     */
    SwatchColorPickerBase.prototype._renderOption = function (item) {
        var id = this._id;
        return (React.createElement(ColorPickerGridCell_1.ColorPickerGridCell, { item: item, id: id, color: item.color, getStyles: this.props.getColorGridCellStyles, disabled: this.props.disabled, onClick: this._onCellClick, onHover: this._onGridCellHovered, onFocus: this._onGridCellFocused, selected: this.state.selectedIndex !== undefined && (this.state.selectedIndex === item.index), circle: this.props.cellShape === 'circle', label: item.label }));
    };
    /**
     * Callback passed to the GridCell class that will trigger the onCellHovered callback of the SwatchColorPicker
     */
    SwatchColorPickerBase.prototype._onGridCellHovered = function (item) {
        if (this.props && this.props.onCellHovered) {
            if (item) {
                this.props.onCellHovered(item.id, item.color);
            }
            else {
                this.props.onCellHovered();
            }
        }
    };
    /**
     * Callback passed to the GridCell class that will trigger the onCellFocus callback of the SwatchColorPicker
     */
    SwatchColorPickerBase.prototype._onGridCellFocused = function (item) {
        if (this.props && this.props.onCellFocused) {
            if (item) {
                this.props.onCellFocused(item.id, item.color);
            }
            else {
                this.props.onCellFocused();
            }
        }
    };
    /**
     * Handle the click on a cell
     * @param item - The cell that the click was fired against
     */
    SwatchColorPickerBase.prototype._onCellClick = function (item) {
        if (this.props.disabled) {
            return;
        }
        var index = item.index;
        // If we have a valid index and it is not already
        // selected, select it
        if (index >= 0 && index !== this.state.selectedIndex) {
            if (this.props.onColorChanged) {
                this.props.onColorChanged(item.id, item.color);
            }
            this.setState({
                selectedIndex: index
            });
        }
    };
    SwatchColorPickerBase.defaultProps = {
        cellShape: 'circle',
        disabled: false,
        shouldFocusCircularNavigate: true
    };
    tslib_1.__decorate([
        Utilities_1.autobind
    ], SwatchColorPickerBase.prototype, "_onSwatchColorPickerBlur", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], SwatchColorPickerBase.prototype, "_renderOption", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], SwatchColorPickerBase.prototype, "_onGridCellHovered", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], SwatchColorPickerBase.prototype, "_onGridCellFocused", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], SwatchColorPickerBase.prototype, "_onCellClick", null);
    SwatchColorPickerBase = tslib_1.__decorate([
        Utilities_1.customizable('SwatchColorPicker', ['theme'])
    ], SwatchColorPickerBase);
    return SwatchColorPickerBase;
}(Utilities_1.BaseComponent));
exports.SwatchColorPickerBase = SwatchColorPickerBase;
//# sourceMappingURL=SwatchColorPicker.base.js.map