import React from 'react';
import styled from 'styled-components';
import VisuallyHidden from '../../../Atoms/VisuallyHidden';
import Typography from '../../../Atoms/Typography';
import OldIcon from '../../../Atoms/OldIcon';
import { STEP_NUMBER_SIZE, VERTICAL_PADDING, HORIZONTAL_PADDING, HORIZONTAL_PADDING_DESKTOP } from '../constants';
var StyledTypography = styled(Typography).withConfig({
  displayName: "Status__StyledTypography",
  componentId: "sc-1ps4k9t-0"
})(["position:absolute;top:", "px;left:", "px;", "{left:", "px;}"], function (p) {
  return p.theme.spacing.unit(VERTICAL_PADDING);
}, function (p) {
  return p.theme.spacing.unit(HORIZONTAL_PADDING);
}, function (p) {
  return p.theme.media.greaterThan(p.theme.breakpoints.sm);
}, function (p) {
  return p.theme.spacing.unit(HORIZONTAL_PADDING_DESKTOP);
});
var Circle = styled.span.withConfig({
  displayName: "Status__Circle",
  componentId: "sc-1ps4k9t-1"
})(["width:", "px;height:", "px;background-color:", ";color:", ";border-radius:50%;display:flex;align-items:center;justify-content:center;"], function (p) {
  return p.theme.spacing.unit(STEP_NUMBER_SIZE);
}, function (p) {
  return p.theme.spacing.unit(STEP_NUMBER_SIZE);
}, function (p) {
  return p.$current ? p.theme.color.cta : p.theme.color.disabledBackground;
}, function (p) {
  return p.$current ? p.theme.color.buttonText : p.theme.color.disabledText;
});
var Status = function Status(_ref) {
  var current = _ref.current,
    done = _ref.done,
    noIcons = _ref.noIcons,
    number = _ref.number,
    titleDone = _ref.titleDone,
    titleNotDone = _ref.titleNotDone;
  return React.createElement(React.Fragment, null, done && React.createElement(VisuallyHidden, null, titleDone), !done && !current && React.createElement(VisuallyHidden, null, titleNotDone), !noIcons && React.createElement(StyledTypography, {
    type: "secondary",
    weight: "bold",
    "aria-hidden": true
  }, done ? React.createElement(OldIcon.CheckMarkCircle, {
    size: STEP_NUMBER_SIZE,
    fill: function fill(t) {
      return t.color.functionGreen;
    }
  }) : React.createElement(Circle, {
    $current: current
  }, number)));
};
export default Status;