"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.stepperStyle = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _theme = require("../theme");

var _ThemeProvider = require("../ThemeProvider");

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

var stepperStyle = function stepperStyle(_ref, _ref2) {
  var isCompleted = _ref.isCompleted,
      isActive = _ref.isActive,
      size = _ref.size,
      _ref$spacing = _ref.spacing,
      spacing = _ref$spacing === void 0 ? 8 : _ref$spacing,
      buttonSize = _ref.buttonSize;
  var colors = _ref2.colors,
      themeSpacing = _ref2.space;
  var offset = 2;
  return {
    style: {
      root: {//
      },
      orientation: {
        vertical: {
          direction: 'column',
          justify: 'center'
        },
        horizontal: {
          align: 'center'
        }
      }
    },
    outer: {
      root: {
        display: 'flex',
        position: 'relative',
        p: [0, 0],
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
        border: 0
      },
      orientation: {
        horizontal: {
          justifyContent: 'center',
          flexDirection: 'column',
          mr: spacing
        },
        vertical: {
          alignItems: 'center',
          flexDirection: 'row'
        }
      }
    },
    item: _objectSpread(_objectSpread({
      variant: isCompleted ? 'primary' : 'tertiary',
      variantColor: 'secondary',
      h: buttonSize,
      minW: buttonSize,
      w: buttonSize,
      border: '2px'
    }, !isCompleted && {
      borderColor: '#42454E'
    }), isActive && {
      bg: 'white',
      borderColor: 'white'
    }),
    check: {
      color: 'titleText'
    },
    divider: {
      base: {
        background: isCompleted ? "linear-gradient(to bottom, ".concat(colors.success[500], " 75%, ").concat((0, _theme.addOpacity)(colors.success[500], 0.5), " 100%)") : colors.border,
        border: 0
      },
      orientation: {
        horizontal: {
          height: "".concat(size, "px"),
          width: "calc(100% + 1rem)",
          position: 'absolute',
          top: 0,
          left: buttonSize,
          mt: "calc(".concat(buttonSize / 8, "rem - ").concat(size / 2, "px)")
        },
        vertical: {
          width: "".concat(size, "px"),
          height: "".concat(spacing + offset),
          my: -(offset / 2),
          ml: "calc(".concat(buttonSize / 8, "rem - ").concat(size / 2, "px)")
        }
      }
    }
  };
};

exports.stepperStyle = stepperStyle;

var useStepperStyle = function useStepperStyle(props) {
  var theme = (0, _ThemeProvider.useTheme)();
  var styles = theme['styles'].stepper ? theme['styles'].stepper(props, theme) : stepperStyle(props, theme);
  return {
    root: _objectSpread(_objectSpread({}, styles.style.root), styles.style.orientation[props.orientation]),
    item: styles.item,
    outer: _objectSpread(_objectSpread({}, styles.outer.root), styles.outer.orientation[props.orientation]),
    divider: _objectSpread(_objectSpread({}, styles.divider.base), styles.divider.orientation[props.orientation]),
    check: styles.check
  };
};

var _default = useStepperStyle;
exports["default"] = _default;
//# sourceMappingURL=styles.js.map