import { __extends, __decorate, __metadata } from 'tslib';
import { Prop, Component } from 'vue-property-decorator';
import { mergeStyleSets } from '@uifabric/styling';
import { getStyles } from '../../Button/ActionButton/ActionButton.styles.js';
import { memoizeFunction, classNamesFunction } from '@uifabric-vue/utilities';
import BaseComponent from '../../BaseComponent.js';
import { getColorFromString } from '../../../utilities/color/getColorFromString.js';
import { GridCell } from '../../../utilities/grid/GridCell.js';

memoizeFunction(function(theme, className, variantClassName, iconClassName, menuIconClassName, disabled, checked, expanded, isSplit) {
  var styles = getStyles(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 = function(_super) {
  __extends(ColorPickerGridCellBase2, _super);
  function ColorPickerGridCellBase2() {
    return _super !== null && _super.apply(this, arguments) || this;
  }
  Object.defineProperty(ColorPickerGridCellBase2.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
  });
  ColorPickerGridCellBase2.prototype.isWhiteCell = function(inputColor) {
    var color = getColorFromString(inputColor);
    return color.hex === "ffffff";
  };
  ColorPickerGridCellBase2.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)
  ], ColorPickerGridCellBase2.prototype, "circle", void 0);
  __decorate([
    Prop({ type: String }),
    __metadata("design:type", String)
  ], ColorPickerGridCellBase2.prototype, "color", void 0);
  __decorate([
    Prop({ type: Boolean }),
    __metadata("design:type", Boolean)
  ], ColorPickerGridCellBase2.prototype, "disabled", void 0);
  __decorate([
    Prop({ type: Boolean }),
    __metadata("design:type", Boolean)
  ], ColorPickerGridCellBase2.prototype, "selected", void 0);
  __decorate([
    Prop({ type: Number, default: 20 }),
    __metadata("design:type", Number)
  ], ColorPickerGridCellBase2.prototype, "height", void 0);
  __decorate([
    Prop({ type: Number, default: 20 }),
    __metadata("design:type", Number)
  ], ColorPickerGridCellBase2.prototype, "width", void 0);
  __decorate([
    Prop({ type: Number, default: 2 }),
    __metadata("design:type", Number)
  ], ColorPickerGridCellBase2.prototype, "borderWidth", void 0);
  ColorPickerGridCellBase2 = __decorate([
    Component({
      components: { GridCell: GridCell }
    })
  ], ColorPickerGridCellBase2);
  return ColorPickerGridCellBase2;
}(BaseComponent);

export { ColorPickerGridCellBase };
