"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TopLevel = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _Box = _interopRequireDefault(require("../../../Atoms/Box"));
var _Button = _interopRequireDefault(require("../../Button"));
var _Typography = _interopRequireDefault(require("../../../Atoms/Typography"));
var _SubLevel = require("../SubLevel");
var _Status = _interopRequireDefault(require("../Status"));
var _constants = require("../constants");
var _ = require("../../..");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var contentLeftPadding = _constants.HORIZONTAL_PADDING + _constants.STEP_NUMBER_SIZE + _constants.SPACE_TO_STEP_NUMBER;
var contentLeftPaddingDesktop = _constants.HORIZONTAL_PADDING_DESKTOP + _constants.STEP_NUMBER_SIZE + _constants.SPACE_TO_STEP_NUMBER;
var StyledOrderedList = _styledComponents.default.ol.withConfig({
  displayName: "TopLevel__StyledOrderedList",
  componentId: "sc-nlt88k-0"
})(["", ""], _constants.listReset);
var MobileProgressLevels = _styledComponents.default.ol.withConfig({
  displayName: "TopLevel__MobileProgressLevels",
  componentId: "sc-nlt88k-1"
})(["", ""], _constants.listReset);
var Wrapper = _styledComponents.default.div.withConfig({
  displayName: "TopLevel__Wrapper",
  componentId: "sc-nlt88k-2"
})([""]);
var ListItem = _styledComponents.default.li.withConfig({
  displayName: "TopLevel__ListItem",
  componentId: "sc-nlt88k-3"
})(["display:block;position:relative;background-color:", ";border-radius:", ";", "{border-radius:0;}&::before{content:'';display:block;background:", ";width:", ";height:100%;position:absolute;top:0;left:0;transition:opacity 0.16s ease-out;opacity:", ";border-top-left-radius:", ";border-bottom-left-radius:", ";", "{width:2px;border-radius:0;}}", "{& + &::after{content:'';display:block;height:1px;box-sizing:border-box;background-color:", ";position:absolute;top:0;left:", "px;right:", "px;}}", "{& + & ", "{margin-top:", "px;}}"], function (p) {
  return p.theme.color.inputBackground;
}, function (_ref) {
  var theme = _ref.theme;
  return theme.borderRadius8;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.media.lessThan(theme.breakpoints.sm);
}, function (p) {
  return p.theme.colorTokens.action.border_default;
}, function (p) {
  return p.$isInDrawer ? '2px' : '8px';
}, function (p) {
  return p.$current ? 1 : 0;
}, function (p) {
  return p.$isInDrawer ? 0 : p.theme.borderRadius8;
}, function (p) {
  return p.$isInDrawer ? 0 : p.theme.borderRadius8;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.media.lessThan(theme.breakpoints.sm);
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.media.lessThan(theme.breakpoints.md);
}, function (p) {
  return p.theme.color.divider;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.spacing.unit(3);
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.spacing.unit(3);
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.media.greaterThan(theme.breakpoints.md);
}, Wrapper, function (p) {
  return p.theme.spacing.unit(3);
});
var Content = (0, _styledComponents.default)(_Box.default).withConfig({
  displayName: "TopLevel__Content",
  componentId: "sc-nlt88k-4"
})(["position:relative;"]);
var StyledButton = (0, _styledComponents.default)(_Button.default).withConfig({
  displayName: "TopLevel__StyledButton",
  componentId: "sc-nlt88k-5"
})(["justify-content:flex-start;"]);
var StyledMobileButton = (0, _styledComponents.default)(StyledButton).withConfig({
  displayName: "TopLevel__StyledMobileButton",
  componentId: "sc-nlt88k-6"
})(["& > span{width:100%;}"]);
var ProgressLevels = function ProgressLevels(_ref8) {
  var steps = _ref8.steps,
    onStepClick = _ref8.onStepClick,
    onSubStepClick = _ref8.onSubStepClick,
    titleDone = _ref8.titleDone,
    titleNotDone = _ref8.titleNotDone,
    isInDrawer = _ref8.isInDrawer;
  return _react.default.createElement(StyledOrderedList, null, steps && (steps === null || steps === void 0 ? void 0 : steps.map(function (step, i) {
    var current = step.current,
      done = step.done,
      label = step.label,
      name = step.name,
      _step$steps = step.steps,
      substeps = _step$steps === void 0 ? [] : _step$steps;
    var number = i + 1;
    return _react.default.createElement(ListItem, {
      key: label,
      $current: current,
      $isInDrawer: isInDrawer
    }, current || done ? _react.default.createElement(Wrapper, null, _react.default.createElement(StyledButton, {
      onClick: function onClick() {
        return onStepClick && onStepClick(name);
      },
      variant: "neutral",
      fullWidth: true
    }, _react.default.createElement(_Typography.default, {
      type: "primary",
      weight: current ? 'bold' : 'regular'
    }, _react.default.createElement(Content, {
      py: _constants.VERTICAL_PADDING,
      pr: _constants.HORIZONTAL_PADDING,
      pl: contentLeftPadding,
      sm: {
        pl: contentLeftPaddingDesktop,
        pr: _constants.HORIZONTAL_PADDING_DESKTOP
      }
    }, _react.default.createElement(_Status.default, {
      current: current,
      done: done,
      number: number,
      titleDone: titleDone,
      titleNotDone: titleNotDone
    }), label)))) : _react.default.createElement(Wrapper, null, _react.default.createElement(_Typography.default, {
      color: function color(t) {
        return t.color.disabledText;
      },
      type: "primary"
    }, _react.default.createElement(Content, {
      py: _constants.VERTICAL_PADDING,
      pr: _constants.HORIZONTAL_PADDING,
      pl: contentLeftPadding,
      sm: {
        pl: contentLeftPaddingDesktop
      }
    }, _react.default.createElement(_Status.default, {
      current: current,
      done: done,
      number: number,
      titleDone: titleDone,
      titleNotDone: titleNotDone
    }), label))), substeps.length > 0 && current && _react.default.createElement(_SubLevel.SubLevel, {
      onStepClick: onSubStepClick,
      steps: substeps,
      titleDone: titleDone,
      titleNotDone: titleNotDone
    }));
  })));
};
var TopLevel = exports.TopLevel = function TopLevel(_ref9) {
  var drawerOpen = _ref9.drawerOpen,
    onStepClick = _ref9.onStepClick,
    onSubStepClick = _ref9.onSubStepClick,
    onMobileStepClick = _ref9.onMobileStepClick,
    _ref9$steps = _ref9.steps,
    steps = _ref9$steps === void 0 ? [] : _ref9$steps,
    titleDone = _ref9.titleDone,
    titleNotDone = _ref9.titleNotDone,
    _ref9$isInDrawer = _ref9.isInDrawer,
    isInDrawer = _ref9$isInDrawer === void 0 ? false : _ref9$isInDrawer;
  if (isInDrawer) {
    return _react.default.createElement(ProgressLevels, {
      steps: steps,
      onStepClick: onStepClick,
      onSubStepClick: onSubStepClick,
      titleDone: titleDone,
      titleNotDone: titleNotDone,
      isInDrawer: true
    });
  }
  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_.Media, {
    query: function query(t) {
      return t.media.greaterThan(t.breakpoints.md.size);
    }
  }, _react.default.createElement(ProgressLevels, {
    steps: steps,
    onStepClick: onStepClick,
    onSubStepClick: onSubStepClick,
    titleDone: titleDone,
    titleNotDone: titleNotDone
  })), _react.default.createElement(_.Media, {
    query: function query(t) {
      return t.media.lessThan(t.breakpoints.md);
    }
  }, _react.default.createElement(MobileProgressLevels, null, steps && (steps === null || steps === void 0 ? void 0 : steps.map(function (step, i) {
    var current = step.current,
      done = step.done,
      label = step.label;
    var number = i + 1;
    if (!current) {
      return null;
    }
    return _react.default.createElement(ListItem, {
      key: label,
      $current: current
    }, _react.default.createElement(StyledMobileButton, {
      onClick: function onClick() {
        return onMobileStepClick && onMobileStepClick();
      },
      variant: "neutral",
      "aria-expanded": drawerOpen,
      fullWidth: true
    }, _react.default.createElement(_Typography.default, {
      type: "primary",
      weight: current ? 'bold' : 'regular'
    }, _react.default.createElement(Content, {
      py: _constants.VERTICAL_PADDING,
      pr: _constants.HORIZONTAL_PADDING,
      pl: contentLeftPadding,
      sm: {
        pl: contentLeftPaddingDesktop,
        pr: _constants.HORIZONTAL_PADDING_DESKTOP
      }
    }, _react.default.createElement(_.Flexbox, {
      container: true,
      justifyContent: "space-between",
      alignItems: "center"
    }, _react.default.createElement(_.Flexbox, {
      item: true
    }, _react.default.createElement(_Status.default, {
      current: current,
      done: done,
      number: number,
      titleDone: titleDone,
      titleNotDone: titleNotDone
    }), label), _react.default.createElement(_.Flexbox, {
      item: true
    }, _react.default.createElement(_.Icon.ChevronDown8, {
      color: function color(t) {
        return t.color.svgFill;
      }
    })))))));
  })))));
};