import React from 'react';
import { b as _taggedTemplateLiteral, a as _objectSpread2 } from '../_rollupPluginBabelHelpers-539c1155.js';
import PropTypes from 'prop-types';
import styled, { keyframes, css as css$1 } from 'styled-components';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import { C as Context } from '../index-91504e81.js';

function _templateObject8() {
  var data = _taggedTemplateLiteral(["\n  ", "\n"]);

  _templateObject8 = function _templateObject8() {
    return data;
  };

  return data;
}

function _templateObject7() {
  var data = _taggedTemplateLiteral(["\n  ", "\n"]);

  _templateObject7 = function _templateObject7() {
    return data;
  };

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteral(["\n  ", "\n"]);

  _templateObject6 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteral(["\n  animation: ", " 1.5s ease-in-out infinite;\n  height: 100%;\n  transform-origin: center center;\n  width: 100%;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  margin: auto;\n  stroke-width: 3;\n  fill: none;\n  stroke-miterlimit: 10;\n  cx: 50;\n  cy: 50;\n  r: 20;\n  stroke: ", ";\n"]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n  animation: ", " 2s linear infinite;\n  stroke-dasharray: 1, 200;\n  stroke-dashoffset: 0;\n  stroke-linecap: round;\n"]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n  position: relative;\n  margin: 0 auto;\n  width: ", "px;\n  height: ", "px;\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  0% {\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n  }\n\n  50% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -35px;\n  }\n\n  100% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -124px;\n  }\n  "]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  to {\n    transform: rotate(360deg);\n  }\n  "]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}
var rotateAnimation = keyframes(_templateObject());
var dashAnimation = keyframes(_templateObject2());
var wrapperStyle = css$1(_templateObject3(), function (props) {
  return props.size;
}, function (props) {
  return props.size;
});
var svgStyle = css$1(_templateObject4(), rotateAnimation);
var circleStyle = css$1(_templateObject5(), dashAnimation, function (props) {
  return props.color || props.theme.colors.blue.haptik;
});
var ThemedLoaderWrapper = styled.div(_templateObject6(), wrapperStyle);
var ThemedSvg = styled.svg(_templateObject7(), svgStyle);
var ThemedCircle = styled.circle(_templateObject8(), circleStyle);
ThemedSvg.defaultProps = {
  viewBox: "25 25 50 50"
};

var css = ".Loader_loader__1F-hR {\n  position: relative;\n  margin: 0 auto; }\n  .Loader_loaderInner__eIGVa {\n    animation: Loader_rotate__ReGbe 2s linear infinite;\n    height: 100%;\n    transform-origin: center center;\n    width: 100%;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    margin: auto; }\n    .Loader_loaderInner__eIGVa circle {\n      stroke-dasharray: 1, 200;\n      stroke-dashoffset: 0;\n      animation: Loader_dash__1YRJs 1.5s ease-in-out infinite;\n      stroke-linecap: round; }\n\n@keyframes Loader_rotate__ReGbe {\n  100% {\n    transform: rotate(360deg); } }\n\n@keyframes Loader_dash__1YRJs {\n  0% {\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0; }\n  50% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -35px; }\n  100% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -124px; } }\n";
var styles = {"loader":"Loader_loader__1F-hR","loaderInner":"Loader_loaderInner__eIGVa","rotate":"Loader_rotate__ReGbe","dash":"Loader_dash__1YRJs"};
styleInject(css);

var Loader = function Loader(props) {
  if (props.themed) {
    var loaderProps = _objectSpread2({}, props, {
      "data-testid": "themedLoader"
    });

    return React.createElement(ThemedLoaderWrapper, loaderProps, React.createElement(ThemedSvg, {
      "data-testid": "themedLoaderInner"
    }, React.createElement(ThemedCircle, {
      color: props.color,
      "data-testid": "themedLoaderCircle"
    })));
  }

  var _React$useContext = React.useContext(Context),
      primaryColor = _React$useContext.primaryColor;

  return React.createElement("div", {
    "data-testid": "loader",
    className: "".concat(styles.loader, " ").concat(props.prefixClassName, " ").concat(props.className),
    style: {
      width: props.size,
      height: props.size
    }
  }, React.createElement("svg", {
    "data-testid": "loader-inner",
    className: "".concat(styles.loaderInner, " ").concat(props.prefixClassName, "-inner"),
    viewBox: "25 25 50 50"
  }, React.createElement("circle", {
    className: "path",
    cx: "50",
    cy: "50",
    r: "20",
    fill: "none",
    strokeWidth: "3",
    strokeMiterlimit: "10",
    stroke: primaryColor
  })));
};

Loader.propTypes = {
  /** Size of the loader to be shown */
  size: PropTypes.number,

  /** The classname to be appended to the outermost element */
  className: PropTypes.string,

  /** prefix to be appended before classname to the child elements */
  prefixClassName: PropTypes.string,
  themed: PropTypes.bool,

  /** Color of the loader */
  color: PropTypes.string
};
Loader.defaultProps = {
  size: 32,
  className: "",
  prefixClassName: "",
  themed: false
};
Loader.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Loader",
  "props": {
    "size": {
      "defaultValue": {
        "value": "32",
        "computed": false
      },
      "type": {
        "name": "number"
      },
      "required": false,
      "description": "Size of the loader to be shown"
    },
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The classname to be appended to the outermost element"
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "prefix to be appended before classname to the child elements"
    },
    "themed": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "color": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Color of the loader"
    }
  }
};

export default Loader;
