import React from 'react';
import { Box, Flexbox, Typography, Icon } from '../..';
import { StyledBox, StyledButton, CompletionBar, StyledButtonPill } from './ProgressIndicator.styled';
import { useMedia } from '../../Atoms/Media';
var ProgressIndicator = function ProgressIndicator(_ref) {
  var numberOfSteps = _ref.numberOfSteps,
    currentStep = _ref.currentStep,
    title = _ref.title,
    closeCallback = _ref.closeCallback,
    backCallback = _ref.backCallback,
    infoCallback = _ref.infoCallback,
    _ref$exitText = _ref.exitText,
    exitText = _ref$exitText === void 0 ? 'Exit' : _ref$exitText,
    _ref$infoText = _ref.infoText,
    infoText = _ref$infoText === void 0 ? 'Info' : _ref$infoText,
    _ref$infoIcon = _ref.infoIcon,
    infoIcon = _ref$infoIcon === void 0 ? 'info' : _ref$infoIcon,
    _ref$buttonCallback = _ref.buttonCallback,
    buttonCallback = _ref$buttonCallback === void 0 ? false : _ref$buttonCallback,
    _ref$borderBottomMobi = _ref.borderBottomMobile,
    borderBottomMobile = _ref$borderBottomMobi === void 0 ? true : _ref$borderBottomMobi;
  var isMobile = useMedia(function (theme) {
    return theme.media.lessThan(theme.breakpoints.sm);
  });
  var isFirstStep = currentStep === 1;
  var noCloseAndBack = !closeCallback && !backCallback;
  var noButtons = noCloseAndBack && !infoCallback;
  var noBackButton = !backCallback;
  var handleBackAndCloseClick = function handleBackAndCloseClick() {
    if ((isFirstStep || noBackButton) && closeCallback) return closeCallback();
    if (backCallback) return backCallback();
    return null;
  };
  return React.createElement(StyledBox, {
    px: 3,
    pt: 3,
    pb: 2,
    md: {
      p: 5
    },
    backgroundColor: function backgroundColor(t) {
      return t.color.progressIndicatorBackground;
    },
    $isMobile: !!isMobile,
    $borderBottomMobile: borderBottomMobile
  }, React.createElement(Flexbox, {
    container: true,
    justifyContent: "space-between",
    gap: 6,
    alignItems: "center"
  }, React.createElement(StyledButton, {
    size: "l",
    variant: "secondary",
    onClick: handleBackAndCloseClick,
    $visible: !isFirstStep && !!backCallback || isFirstStep && !!closeCallback || noBackButton,
    $hide: buttonCallback && !isMobile || noButtons || !backCallback && !isFirstStep && !noBackButton || noCloseAndBack,
    $isMobile: !!isMobile
  }, isFirstStep || noBackButton ? React.createElement(Icon.Cross16, {
    color: "currentColor"
  }) : React.createElement(Icon.ChevronLeft16, {
    color: "currentColor"
  })), React.createElement(Flexbox, {
    item: true,
    container: true,
    justifyContent: "space-between",
    gap: 2,
    alignItems: "center",
    width: "auto",
    flex: "1"
  }, React.createElement(CompletionBar, {
    completion: Number(currentStep) / Number(numberOfSteps),
    noButtons: noButtons
  })), typeof infoCallback === 'function' ? React.createElement(StyledButton, {
    size: "l",
    variant: "secondary",
    onClick: function onClick() {
      return infoCallback();
    },
    $visible: !!infoCallback,
    $hide: noButtons || buttonCallback && !isMobile,
    $isMobile: !!isMobile
  }, infoIcon === 'info' ? React.createElement(Icon.Information16, {
    color: "currentColor"
  }) : React.createElement(Icon.Help16, {
    color: "currentColor"
  })) : buttonCallback && isMobile && infoCallback), React.createElement(Box, {
    pt: 3
  }, React.createElement(Flexbox, {
    container: true,
    justifyContent: "space-between",
    alignItems: "flex-start"
  }, title && React.createElement(Box, {
    pr: 2
  }, React.createElement(Typography, {
    type: "title2"
  }, title)), buttonCallback && !isMobile && React.createElement(Flexbox, {
    item: true,
    container: true,
    justifyContent: "flex-end",
    flex: "1"
  }, React.createElement(Flexbox, {
    container: true,
    gap: 3,
    direction: "row",
    alignItems: "center"
  }, typeof infoCallback === 'function' ? React.createElement(StyledButtonPill, {
    variant: "secondary",
    icon: infoIcon === 'info' ? React.createElement(Icon.Information16, {
      color: "currentColor"
    }) : React.createElement(Icon.Help16, {
      color: "currentColor"
    }),
    onClick: function onClick() {
      return infoCallback();
    },
    size: "s"
  }, infoText) : infoCallback, closeCallback && React.createElement(StyledButtonPill, {
    variant: "secondary",
    icon: React.createElement(Icon.Cross16, {
      color: "currentColor"
    }),
    onClick: closeCallback,
    size: "s"
  }, exitText))))));
};
export default ProgressIndicator;