import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React from "react";
import CssGrid from "../../ui/CssGrid";
import Box from "../../ui/Box";
import Typography from "../../ui/Typography";
import styled from "../../ui/styles/styled";
import { usePMaxState } from "./context";
var PROGRESS_BAR_VALUES = {
  goal: 25,
  connect: 50,
  assets: 75,
  summary: 100
};

function CustomProgressBar(_ref) {
  var value = _ref.value,
      labelledBy = _ref.labelledBy;
  var transformValue = 100 - value;
  return (
    /*#__PURE__*/

    /* @ts-ignore */
    React.createElement(Box, {
      role: "progressbar",
      "aria-valuenow": value,
      "aria-labelledby": labelledBy,
      backgroundColor: "neutral.300",
      height: "9px",
      overflow: "hidden",
      borderRadius: "10px 0 0 10px"
    }, /*#__PURE__*/React.createElement(Box
    /* @ts-ignore */
    , {
      backgroundColor: "green.500",
      width: "100%",
      height: "100%",
      transform: "translateX(-".concat(transformValue, "%)"),
      transition: "transform .4s ease-out",
      transformOrigin: "left"
    }))
  );
}

function TopbarProgressBar(_ref2) {
  var translations = _ref2.translations;

  var _usePMaxState = usePMaxState(),
      _usePMaxState2 = _slicedToArray(_usePMaxState, 1),
      state = _usePMaxState2[0];

  var PROGRESS_BAR_MESSAGES = {
    25: translations.step_1,
    50: translations.step_2,
    75: translations.step_3,
    100: translations.step_4
  };
  var progressBarValue = PROGRESS_BAR_VALUES[state.step];
  var labelId = "pmax-creation-progress-bar-label";
  return (
    /*#__PURE__*/

    /* @ts-ignore */
    React.createElement(Box, {
      overflow: "hidden"
    }, /*#__PURE__*/React.createElement(CssGrid, {
      justifyContent: ["start", "end"],
      width: ["100%", "".concat(progressBarValue, "%")],
      transition: [null, "width .4s ease-out"],
      transformOrigin: "left"
    }, /*#__PURE__*/React.createElement(ProgressText, {
      id: labelId,
      variant: "small",
      color: "success",
      shade: 700
    }, PROGRESS_BAR_MESSAGES[progressBarValue])), /*#__PURE__*/React.createElement(CustomProgressBar, {
      labelledBy: labelId,
      value: progressBarValue
    }))
  );
}

var ProgressText = styled(Typography)(function (_ref3) {
  var theme = _ref3.theme;
  return _defineProperty({}, theme.breakpoints.up("lg"), {
    fontSize: "12px"
  });
});
export default TopbarProgressBar;