import { useMemo, createElement } from 'react';
import _pt from 'prop-types';
import colors from '../../theme/colors.esm.js';
import { testSafeMathRandom, testSafeSample } from '../../utils/helpers/testSafeRandomness.esm.js';
import { getLikelihoodOfBeingBlank } from './DecorativeDots.helpers.esm.js';
import Dot from './Dot.esm.js';

var dotSvgStyles = {
  // We want to let the circles at the edge of the SVG spill out, not get
  // cropped by the SVG boundaries. Cropping will naturally occur if we
  // position this SVG at an edge of the viewport =)
  overflow: "visible"
};
function DecorativeDots(_ref) {
  var width = _ref.width,
      height = _ref.height,
      dotSize = _ref.dotSize,
      _ref$angle = _ref.angle,
      angle = _ref$angle === void 0 ? 0 : _ref$angle,
      _ref$fadeStrength = _ref.fadeStrength,
      fadeStrength = _ref$fadeStrength === void 0 ? 0.25 : _ref$fadeStrength,
      __random = _ref.__random,
      __sample = _ref.__sample;
  var dots = useMemo(function () {
    var numRows = Math.floor(height / dotSize);
    var numCols = Math.floor(width / dotSize);
    return generateDotData({
      numRows: numRows,
      numCols: numCols,
      angle: angle,
      dotSize: dotSize,
      fadeStrength: fadeStrength,
      random: __random,
      sample: __sample
    });
  }, [height, width, angle, dotSize, fadeStrength, __random, __sample]);
  return /*#__PURE__*/createElement("svg", {
    width: width,
    height: height,
    style: dotSvgStyles,
    "aria-hidden": true
  }, dots.map(function (dot, i) {
    return /*#__PURE__*/createElement(Dot, {
      key: i,
      x: dot.x,
      y: dot.y,
      color: dot.color,
      opacity: dot.opacity,
      size: dot.size
    });
  }));
} // These colors were chosen somewhat haphazardly from previous assets.
// For now, this is not customizable, colors are meant to be semi-randomly
// drawn from our design palette.

DecorativeDots.propTypes = {
  width: _pt.number.isRequired,
  height: _pt.number.isRequired,
  dotSize: _pt.number.isRequired,
  angle: _pt.number,
  fadeStrength: _pt.number,
  __random: _pt.func,
  __sample: _pt.func
};
var COLORS = [colors.red[40], colors.red[60], colors.orange[40], colors.orange[60], colors.yellow[40], colors.green[20], colors.green[40], colors.blue[20], colors.blue[40], colors.magenta[20], colors.magenta[50], colors.purple[40], colors.purple[60], colors.teal[20], colors.teal[50], colors.teal[70]]; // Every circle is given a random opacity, but it's weighted so that outliers
// don't happen much.

var OPACITIES = [0.15, 0.25, 0.25, 0.25, 0.5, 0.5, 0.75];

function generateDotData(_ref2) {
  var numRows = _ref2.numRows,
      numCols = _ref2.numCols,
      angle = _ref2.angle,
      dotSize = _ref2.dotSize,
      fadeStrength = _ref2.fadeStrength,
      _ref2$random = _ref2.random,
      random = _ref2$random === void 0 ? testSafeMathRandom : _ref2$random,
      _ref2$sample = _ref2.sample,
      sample = _ref2$sample === void 0 ? testSafeSample : _ref2$sample;
  var dots = [];
  var dotSpacing = Math.round(dotSize / 10);
  var totalDotSpace = dotSize + dotSpacing;

  for (var rowIndex = 0; rowIndex < numRows; rowIndex++) {
    for (var colIndex = 0; colIndex < numCols; colIndex++) {
      var likelihoodOfBeingBlank = getLikelihoodOfBeingBlank(angle, colIndex, rowIndex, numCols, numRows);
      var isBlank = likelihoodOfBeingBlank * random() < fadeStrength;

      if (!isBlank) {
        dots.push({
          x: colIndex * totalDotSpace,
          y: rowIndex * totalDotSpace,
          color: sample(COLORS),
          opacity: sample(OPACITIES),
          size: dotSize
        });
      }
    }
  }

  return dots;
}

DecorativeDots.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "DecorativeDots",
  "props": {
    "angle": {
      "defaultValue": {
        "value": "0",
        "computed": false
      },
      "required": false,
      "tsType": {
        "name": "number"
      },
      "description": ""
    },
    "fadeStrength": {
      "defaultValue": {
        "value": "0.25",
        "computed": false
      },
      "required": false,
      "tsType": {
        "name": "number"
      },
      "description": ""
    },
    "width": {
      "required": true,
      "tsType": {
        "name": "number"
      },
      "description": ""
    },
    "height": {
      "required": true,
      "tsType": {
        "name": "number"
      },
      "description": ""
    },
    "dotSize": {
      "required": true,
      "tsType": {
        "name": "number"
      },
      "description": ""
    },
    "__random": {
      "required": false,
      "tsType": {
        "name": "signature",
        "type": "function",
        "raw": "() => number",
        "signature": {
          "arguments": [],
          "return": {
            "name": "number"
          }
        }
      },
      "description": ""
    },
    "__sample": {
      "required": false,
      "tsType": {
        "name": "signature",
        "type": "function",
        "raw": "<T>(values: T[]) => T",
        "signature": {
          "arguments": [{
            "name": "values",
            "type": {
              "name": "Array",
              "elements": [{
                "name": "T"
              }],
              "raw": "T[]"
            }
          }],
          "return": {
            "name": "T"
          }
        }
      },
      "description": ""
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/DecorativeDots/DecorativeDots.tsx"] = {
    name: "DecorativeDots",
    docgenInfo: DecorativeDots.__docgenInfo,
    path: "src/components/DecorativeDots/DecorativeDots.tsx"
  };
}

export { DecorativeDots };
//# sourceMappingURL=DecorativeDots.esm.js.map
