import { __extends, __decorate, __metadata } from 'tslib';
import { Prop, Component } from 'vue-property-decorator';
import BaseComponent from '../BaseComponent.js';
import { classNamesFunction } from '@uifabric-vue/utilities';
import { Grid } from '../../utilities/grid/Grid.js';
import { ColorPickerGridCell } from './ColorPickerGridCell/ColorPickerGridCell.js';

var getClassNames = classNamesFunction();
var SwatchColorPickerBase = function(_super) {
  __extends(SwatchColorPickerBase2, _super);
  function SwatchColorPickerBase2() {
    return _super !== null && _super.apply(this, arguments) || this;
  }
  Object.defineProperty(SwatchColorPickerBase2.prototype, "classNames", {
    get: function() {
      var _a = this, theme = _a.theme, styles = _a.styles, className = _a.className, cellMargin = _a.cellMargin;
      return getClassNames(styles, {
        theme: theme,
        className: className,
        cellMargin: cellMargin
      });
    },
    enumerable: false,
    configurable: true
  });
  SwatchColorPickerBase2.prototype.render = function(h) {
    var _a = this, colorCells = _a.colorCells, columnCount = _a.columnCount, cellShape = _a.cellShape, cellWidth = _a.cellWidth, cellHeight = _a.cellHeight;
    return h(Grid, {
      attrs: {
        items: colorCells,
        columnCount: columnCount
      },
      scopedSlots: {
        default: function(_a2) {
          var item = _a2.cell;
          return h(ColorPickerGridCell, {
            attrs: {
              color: item.color,
              circle: cellShape === "circle",
              width: cellWidth,
              height: cellHeight
            }
          });
        }
      }
    });
  };
  __decorate([
    Prop({ default: 10 }),
    __metadata("design:type", Number)
  ], SwatchColorPickerBase2.prototype, "cellMargin", void 0);
  __decorate([
    Prop({ type: Array, default: function() {
      return [];
    } }),
    __metadata("design:type", Array)
  ], SwatchColorPickerBase2.prototype, "colorCells", void 0);
  __decorate([
    Prop({ type: Number }),
    __metadata("design:type", Number)
  ], SwatchColorPickerBase2.prototype, "columnCount", void 0);
  __decorate([
    Prop({ type: String, default: "circle" }),
    __metadata("design:type", String)
  ], SwatchColorPickerBase2.prototype, "cellShape", void 0);
  __decorate([
    Prop({ type: Number }),
    __metadata("design:type", Number)
  ], SwatchColorPickerBase2.prototype, "cellHeight", void 0);
  __decorate([
    Prop({ type: Number }),
    __metadata("design:type", Number)
  ], SwatchColorPickerBase2.prototype, "cellWidth", void 0);
  SwatchColorPickerBase2 = __decorate([
    Component({
      components: { Grid: Grid, ColorPickerGridCell: ColorPickerGridCell },
      inheritAttrs: false
    })
  ], SwatchColorPickerBase2);
  return SwatchColorPickerBase2;
}(BaseComponent);

export { SwatchColorPickerBase };
