import _range from "ramda/src/range";
import React from 'react';
import styled, { useTheme } from 'styled-components';
import { Badge, Flexbox, Icon, Typography } from '../..';
var StyledContainer = styled(Flexbox).withConfig({
  displayName: "ProgressBar__StyledContainer",
  componentId: "sc-11x02c0-0"
})(["width:100%;", "{padding-bottom:", "px;}"], function (p) {
  return p.theme.media.greaterThan(p.theme.breakpoints.md);
}, function (_ref) {
  var theme = _ref.theme,
    hasLabels = _ref.hasLabels;
  return hasLabels ? theme.spacing.unit(8) : 0;
});
var Bubble = styled(Badge.Icon).withConfig({
  displayName: "ProgressBar__Bubble",
  componentId: "sc-11x02c0-1"
})(["position:relative;"]);
var StyledTypography = styled(Typography).withConfig({
  displayName: "ProgressBar__StyledTypography",
  componentId: "sc-11x02c0-2"
})(["display:none;text-align:center;white-space:nowrap;", "{display:block;position:absolute;top:", "px;}"], function (p) {
  return p.theme.media.greaterThan(p.theme.breakpoints.md);
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.spacing.unit(10);
});
var StyledLine = styled.div.withConfig({
  displayName: "ProgressBar__StyledLine",
  componentId: "sc-11x02c0-3"
})(["width:100%;height:2px;background-color:", ";"], function (p) {
  return p.lineColor;
});
var ProgressBar = function ProgressBar(_ref3) {
  var numberOfSteps = _ref3.numberOfSteps,
    currentStep = _ref3.currentStep,
    stepLabels = _ref3.stepLabels,
    _ref3$failed = _ref3.failed,
    failed = _ref3$failed === void 0 ? false : _ref3$failed,
    _ref3$warning = _ref3.warning,
    warning = _ref3$warning === void 0 ? false : _ref3$warning,
    colorDone = _ref3.colorDone,
    colorActive = _ref3.colorActive,
    colorNext = _ref3.colorNext,
    colorFailure = _ref3.colorFailure,
    colorText = _ref3.colorText,
    colorLabel = _ref3.colorLabel,
    titleContainer = _ref3.titleContainer,
    titleDone = _ref3.titleDone,
    titleActive = _ref3.titleActive,
    titleNext = _ref3.titleNext,
    titleFailure = _ref3.titleFailure;
  var theme = useTheme();
  var stepBubble = function stepBubble(stepNumber) {
    var stepDone = stepNumber < currentStep;
    var stepActive = stepNumber === currentStep;
    var lineActive = stepNumber + 1 === currentStep;
    var titleProgress = function titleProgress() {
      if (stepDone) {
        return titleDone || 'step done';
      }
      if (stepActive) {
        return titleActive || 'active step';
      }
      if (failed) {
        return titleFailure || 'failure step';
      }
      if (warning) {
        return titleFailure || 'warning step';
      }
      return titleNext || 'step not done';
    };
    var title = "".concat(stepLabels ? stepLabels[stepNumber - 1] : stepNumber.toString(), " - ").concat(titleProgress());
    var getStepIcon = function getStepIcon() {
      if (stepDone) {
        return React.createElement(Icon.Check16, {
          color: function color(t) {
            return colorText ? colorText(t) : t.color.progressBarText;
          }
        });
      }
      if (stepActive && failed) {
        return React.createElement(Icon.Cross16, {
          color: function color(t) {
            return colorText ? colorText(t) : t.color.progressBarText;
          }
        });
      }
      if (stepActive && warning) {
        return React.createElement(Icon.Warning16, {
          color: function color(t) {
            return colorText ? colorText(t) : t.color.progressBarText;
          }
        });
      }
      return stepNumber;
    };
    var getColor = function getColor(active) {
      if (active && failed) {
        return colorFailure ? colorFailure(theme) : theme.color.progressBarFailure;
      }
      if (active && warning) {
        return colorFailure ? colorFailure(theme) : theme.color.progressBarWarning;
      }
      if (active) {
        return colorActive ? colorActive(theme) : theme.color.progressBarActive;
      }
      if (stepDone) {
        return colorDone ? colorDone(theme) : theme.color.progressBarDone;
      }
      return colorNext ? colorNext(theme) : theme.color.progressBarNext;
    };
    return React.createElement(React.Fragment, {
      key: stepNumber
    }, React.createElement(Bubble, {
      title: title,
      badgeColor: function badgeColor() {
        return getColor(stepActive);
      },
      badgeSize: 8
    }, React.createElement(Typography, {
      type: "secondary",
      color: function color(t) {
        return colorText ? colorText(t) : t.color.progressBarText;
      },
      weight: "bold",
      "aria-hidden": true
    }, getStepIcon()), React.createElement(StyledTypography, {
      type: "secondary",
      weight: stepActive ? 'bold' : 'regular',
      color: function color(t) {
        return colorLabel ? colorLabel(t) : t.color.text;
      },
      "aria-hidden": true
    }, stepLabels && stepLabels[stepNumber - 1])), stepNumber < numberOfSteps && React.createElement(StyledLine, {
      lineColor: function lineColor() {
        return getColor(lineActive);
      }
    }));
  };
  var generateSteps = function generateSteps() {
    var steps = _range(1, numberOfSteps + 1);
    return steps === null || steps === void 0 ? void 0 : steps.map(function (step) {
      return stepBubble(step);
    });
  };
  return React.createElement(StyledContainer, {
    container: true,
    alignItems: "center",
    title: titleContainer || 'progress bar',
    hasLabels: stepLabels && stepLabels.length > 0
  }, generateSteps());
};
export default ProgressBar;