'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var __chunk_3 = require('../chunk-6d243953.js');
var PropTypes = _interopDefault(require('prop-types'));
var __chunk_1 = require('../chunk-f817ce38.js');
var index = require('./ProgressBar/index.js');
var index$1 = require('../Text/index.js');
require('../chunk-2b268ae7.js');

var useWindowSize = function useWindowSize() {
  var isClient = (typeof window === 'undefined' ? 'undefined' : __chunk_3._typeof(window)) === 'object';

  var getSize = function getSize() {
    return {
      width: isClient ? window.innerWidth : undefined,
      height: isClient ? window.innerHeight : undefined
    };
  };

  var _useState = React.useState(getSize),
      _useState2 = __chunk_3.slicedToArray(_useState, 2),
      windowSize = _useState2[0],
      setWindowSize = _useState2[1];

  React.useEffect(function () {
    if (!isClient) return false;

    var handleResize = function handleResize() {
      return setWindowSize(getSize());
    };

    window.addEventListener('resize', handleResize);
    return function () {
      return window.removeEventListener('resize', handleResize);
    };
  }, []); // Empty array ensures that effect is only run on mount and unmount

  return windowSize;
};

var styles = (function (theme) {
  return {
    container: {
      height: '36px',
      /* width: '100%', */
      padding: '10px',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#fafafa',
      borderBottom: 'solid 1px #d3d3db'
    },

    content: {
      width: '100%',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center'
    },

    progressBar: {
      width: '50%',
      padding: '10px'
    },

    labels: {
      width: '70%',
      display: 'flex',
      justifyContent: 'space-between'
    },

    '@media screen and ( min-width: 768px)': {
      progressBar: {
        display: 'none'
      },

      content: {
        /* justify-content: 'flex-start', */
        display: 'flex',
        justifyContent: 'flex-start',
        width: '720px'
      },

      labels: {
        width: '100%',
        justifyContent: 'flex-start'
      },

      label: {
        marginRight: '54px'
      }
    }
  };
});

var Breadcrumbs = function Breadcrumbs(_ref) {
  var step = _ref.step,
      labels = _ref.labels,
      classes = _ref.classes,
      className = _ref.className,
      rest = __chunk_3.objectWithoutProperties(_ref, ['step', 'labels', 'classes', 'className']);


  var dimensions = useWindowSize();

  return React__default.createElement(
    'div',
    __chunk_3._extends({ className: __chunk_1.classNames(classes.container, className) }, rest),
    React__default.createElement(
      'div',
      { className: classes.content },
      React__default.createElement(
        'div',
        { className: classes.progressBar },
        React__default.createElement(index, { currentStep: step, totalSteps: labels.length })
      ),
      React__default.createElement(
        'div',
        { className: classes.labels },
        labels.map(function (label, index$$1) {
          return React__default.createElement(
            index$1,
            {
              key: label,
              className: classes.label,
              size: dimensions.width < 768 ? '10px' : '14px',
              bold: index$$1 < step
            },
            dimensions.width < 768 ? label : index$$1 + 1 + '. ' + label
          );
        })
      )
    )
  );
};

Breadcrumbs.propTypes = {
  step: PropTypes.number,
  labels: PropTypes.arrayOf(PropTypes.string),
  classes: PropTypes.object,
  className: PropTypes.string
};

var Breadcrumbs$1 = __chunk_1.withNano(styles)(Breadcrumbs);

module.exports = Breadcrumbs$1;
//# sourceMappingURL=index.js.map
