import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";

var _templateObject, _templateObject2, _templateObject3;

// @ts-nocheck
import React from "react";
import { Fill } from "nano-slots";
import Dialog from "../../../ui/lab/Dialog";
import Typography from "../../../ui/Typography";
import styled from "../../../ui/styles/styled";
import IllustrationFinishRocket from "../assets/illustration-finish-rocket";
import { usePMaxState } from "../context";
import { setStep } from "../reducer";
import NoBilling from "./NoBilling";
import LoadingContent from "./LoadingContent";

function StepFinish(_ref) {
  var translations = _ref.translations,
      billingCompleted = _ref.billingCompleted,
      metricsUrl = _ref.metricsUrl,
      isLoading = _ref.isLoading,
      onClose = _ref.onClose,
      onVerify = _ref.onVerify,
      onSupport = _ref.onSupport;

  var _usePMaxState = usePMaxState(),
      _usePMaxState2 = _slicedToArray(_usePMaxState, 2),
      dispatch = _usePMaxState2[1];

  var billingIssue = billingCompleted && (!billingCompleted.google || !billingCompleted.microsoft);

  var handleClose = function handleClose() {
    onClose(); // Reset step state

    setStep(dispatch, "goal");
  };

  if (isLoading) {
    return /*#__PURE__*/React.createElement(LoadingContent, null);
  }

  if (billingIssue) {
    return /*#__PURE__*/React.createElement(NoBilling, {
      translations: translations.no_billing,
      billingCompleted: billingCompleted,
      onVerify: onVerify,
      onSupport: onSupport
    });
  }

  return /*#__PURE__*/React.createElement(Fill, {
    name: "pmax-creation-step-finish"
  }, /*#__PURE__*/React.createElement(Dialog.Body, {
    display: "grid",
    placeItems: "center",
    gap: "md"
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "title",
    shade: 800,
    align: "center"
  }, translations.success.title), /*#__PURE__*/React.createElement(StyledImage, null), /*#__PURE__*/React.createElement(StyledTypography, {
    variant: "paragraph",
    align: "center",
    dangerouslySetInnerHTML: {
      __html: translations.success.description1.replace("{metrics_url}", metricsUrl)
    }
  }), /*#__PURE__*/React.createElement(StyledTypography, {
    variant: "paragraph",
    align: "center"
  }, translations.success.description2), /*#__PURE__*/React.createElement(StyledTypography, {
    variant: "paragraph",
    align: "center",
    dangerouslySetInnerHTML: {
      __html: translations.success.description3
    }
  })), /*#__PURE__*/React.createElement(StyledFooter, {
    justifyContent: "flex-end"
  }, /*#__PURE__*/React.createElement(Dialog.FooterButton, {
    onClick: handleClose,
    autoFocus: "on"
  }, translations.success.button)));
}

var StyledImage = styled(IllustrationFinishRocket)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: auto;\n  max-width: 200px;\n  margin: ", " 0;\n"])), function (props) {
  return props.theme.spaces.md;
});
var StyledTypography = styled(Typography)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  & > a {\n    color: inherit;\n    font-weight: 700;\n    text-decoration: underline;\n\n    &:hover,\n    &:focus {\n      color: ", ";\n    }\n  }\n"])), function (props) {
  return props.theme.colors.neutral[600];
});
var StyledFooter = styled(Dialog.Footer)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  justify-content: flex-end;\n"])));
export default StepFinish;