"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

const tslib_1 = require("tslib");

const react_1 = tslib_1.__importDefault(require("react"));

const Vector_1 = tslib_1.__importDefault(require("../../Vector"));

const styled_1 = require("./styled");

const deps_1 = require("../deps");

class ImagePlaceholder extends react_1.default.PureComponent {
  render() {
    let _a = this.props,
        {
      fill,
      width,
      height,
      viewBox,
      isDynamicViewBox,
      className
    } = _a,
        remainingProps = tslib_1.__rest(_a, ["fill", "width", "height", "viewBox", "isDynamicViewBox", "className"]);

    const imageSpecs = deps_1.getSVGSpecs(width, height);
    /**
     * viewBox cant be changed as it needs to support for resizing
     * we will be resizing it by using css properties
     * Issue Scenario:
     * When we try to change the viewBox value as dynamic then the image path
     * should not be resized based on that size
     * So, we might need to keep the same size of the viewBox which we got
     * on exporting SVG
     */

    viewBox = '0 0 60 46';
    isDynamicViewBox = false;
    /**
     * assigning the validated values
     * @todo need to update the logic when the user tries to send the value as "auto"
     * change that required in deps.ts (getSVGSpecs)
     */

    width = imageSpecs.width;
    height = imageSpecs.height;
    const attributes = Object.assign({
      width,
      height,
      viewBox
    }, remainingProps);
    return react_1.default.createElement(styled_1.ImagePlaceholderWrapper, {
      width: width,
      height: height,
      className: className
    }, react_1.default.createElement(Vector_1.default, Object.assign({}, attributes), react_1.default.createElement("g", {
      fill: "none",
      fillRule: "evenodd"
    }, react_1.default.createElement("path", {
      d: "M13.569 17.138a5.575 5.575 0 0 0 5.569-5.568A5.575 5.575 0 0 0 13.569 6 5.575 5.575 0 0 0 8 11.569a5.575 5.575 0 0 0 5.569 5.569zm0-9.138a3.574 3.574 0 0 1 3.569 3.569 3.574 3.574 0 0 1-3.569 3.569A3.573 3.573 0 0 1 10 11.57 3.574 3.574 0 0 1 13.569 8z",
      fill: "#fff",
      fillRule: "nonzero"
    }), react_1.default.createElement("path", {
      stroke: "#fff",
      strokeWidth: "2.5",
      d: "M2 39.25l21.652-19.14 6.874 6.91 7.249 7.285"
    }), react_1.default.createElement("path", {
      stroke: "#fff",
      strokeWidth: "2.5",
      d: "M30.677 27.805L42.542 15l15.26 13.865"
    }), react_1.default.createElement("path", {
      stroke: "#fff",
      strokeWidth: "2",
      d: "M2 1h56v44H2z"
    }))));
  }

}

ImagePlaceholder.defaultProps = {
  className: '',
  fill: '#D8D8D8',
  viewBox: '0 0 60 46',
  width: '250',
  height: '250',
  isDynamicViewBox: false
};
exports.ImagePlaceholder = ImagePlaceholder;
exports.default = ImagePlaceholder; //# sourceMappingURL=ImagePlaceholder.js.map