import React, { useState, useEffect } from 'react';
import { a as classCallCheck, b as createClass, c as defineProperty, d as inherits, e as objectWithoutProperties, f as possibleConstructorReturn, g as slicedToArray, h as _typeof, i as _extends } from '../chunk-aad905a2.js';
import PropTypes from 'prop-types';
import { a as withNano, b as classNames } from '../chunk-566df01b.js';
import ProgressBar from './ProgressBar/index.js';
import Text from '../Text/index.js';
import '../chunk-aeb80e51.js';

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

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

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

  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 = objectWithoutProperties(_ref, ['step', 'labels', 'classes', 'className']);


  var dimensions = useWindowSize();

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

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

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

export default Breadcrumbs$1;
//# sourceMappingURL=index.js.map
