define(["require", "exports", "tslib", "react", "../../Utilities", "../../utilities/color/colors", "../../utilities/grid/Grid", "../../utilities/grid/GridCell", "./SwatchColorPicker.scss"], function (require, exports, tslib_1, React, Utilities_1, colors_1, Grid_1, GridCell_1, stylesImport) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var styles = stylesImport;
    var ColorPickerGridCell = /** @class */ (function (_super) {
        tslib_1.__extends(ColorPickerGridCell, _super);
        function ColorPickerGridCell() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        return ColorPickerGridCell;
    }(GridCell_1.GridCell));
    var SwatchColorPicker = /** @class */ (function (_super) {
        tslib_1.__extends(SwatchColorPicker, _super);
        function SwatchColorPicker(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;
        }
        SwatchColorPicker.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
                });
            }
        };
        SwatchColorPicker.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;
            if (colorCells.length < 1 || columnCount < 1) {
                return null;
            }
            return (React.createElement(Grid_1.Grid, { 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, onBlur: this._onSwatchColorPickerBlur, containerClassName: Utilities_1.css('ms-swatchColorPickerBodyContainer', styles.swatchColorPickerContainer, className) }));
        };
        /**
         * When the whole swatchColorPicker is blurred,
         * make sure to clear the pending focused stated
         */
        SwatchColorPicker.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
         */
        SwatchColorPicker.prototype._getSelectedIndex = function (items, selectedId) {
            var selectedIndex = Utilities_1.findIndex(items, (function (item) { return (item.id === selectedId); }));
            return selectedIndex >= 0 ? selectedIndex : undefined;
        };
        /**
         * Render a color cell
         * @param item - The item to render
         * @returns {JSX.Element} - Element representing the item
         */
        SwatchColorPicker.prototype._renderOption = function (item) {
            var id = this._id;
            return (React.createElement(ColorPickerGridCell, { item: item, id: id, key: id + item.id, disabled: this.props.disabled, className: styles.cell, onClick: this._onCellClick, onHover: this._onGridCellHovered, onFocus: this._onGridCellFocused, onRenderItem: this._onRenderColorOption, role: 'gridcell', selected: this.state.selectedIndex !== undefined && (this.state.selectedIndex === item.index), cellIsSelectedStyle: ['is-selected ' + styles.cellIsSelected], cellDisabledStyle: ['is-disabled ' + styles.disabled], label: item.label }));
        };
        /**
         * Callback passed to the GridCell class that will trigger the onCellHovered callback of the SwatchColorPicker
         */
        SwatchColorPicker.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
         */
        SwatchColorPicker.prototype._onGridCellFocused = function (item) {
            if (this.props && this.props.onCellFocused) {
                if (item) {
                    this.props.onCellFocused(item.id, item.color);
                }
                else {
                    this.props.onCellFocused();
                }
            }
        };
        /**
         * Render the core of a color cell
         * @returns {JSX.Element} - Element representing the core of the item
         */
        SwatchColorPicker.prototype._onRenderColorOption = function (colorOption) {
            // Build an SVG for the cell with the given shape and color properties
            return (React.createElement("svg", { className: Utilities_1.css(styles.svg, this.props.cellShape, this.props.cellShape === 'circle' ? styles.circle : ''), viewBox: '0 0 20 20', fill: colors_1.getColorFromString(colorOption.color).str }, this.props.cellShape === 'circle' ?
                React.createElement("circle", { cx: '50%', cy: '50%', r: '50%' }) :
                React.createElement("rect", { width: '100%', height: '100%' })));
        };
        /**
         * Handle the click on a cell
         * @param item - The cell that the click was fired against
         */
        SwatchColorPicker.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
                });
            }
        };
        SwatchColorPicker.defaultProps = {
            cellShape: 'circle',
            disabled: false,
            shouldFocusCircularNavigate: true
        };
        tslib_1.__decorate([
            Utilities_1.autobind
        ], SwatchColorPicker.prototype, "_onSwatchColorPickerBlur", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], SwatchColorPicker.prototype, "_renderOption", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], SwatchColorPicker.prototype, "_onGridCellHovered", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], SwatchColorPicker.prototype, "_onGridCellFocused", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], SwatchColorPicker.prototype, "_onRenderColorOption", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], SwatchColorPicker.prototype, "_onCellClick", null);
        return SwatchColorPicker;
    }(Utilities_1.BaseComponent));
    exports.SwatchColorPicker = SwatchColorPicker;
});
//# sourceMappingURL=SwatchColorPicker.js.map