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

var _templateObject, _templateObject2;

// @ts-nocheck
import React, { useState, useEffect } from "react";
import { Fill } from "nano-slots";
import Dialog from "../../../../ui/lab/Dialog";
import Typography from "../../../../ui/Typography";
import Link from "../../../../ui/Link";
import GoogleAdsCircle from "../../../../ui/BrandIcon/GoogleAdsCircle";
import MicrosoftCircle from "../../../../ui/BrandIcon/MicrosoftCircle";
import styled from "../../../../ui/styles/styled";
import IllustrationFinishBillingError from "../../assets/illustration-finish-billing-error";

function BillingError(_ref) {
  var translations = _ref.translations,
      billingCompleted = _ref.billingCompleted,
      resetState = _ref.resetState,
      onSupport = _ref.onSupport;

  var _useState = useState(billingCompleted.google),
      _useState2 = _slicedToArray(_useState, 2),
      googleClicked = _useState2[0],
      setGoogleClicked = _useState2[1];

  var _useState3 = useState(billingCompleted.microsoft),
      _useState4 = _slicedToArray(_useState3, 2),
      microsoftClicked = _useState4[0],
      setMicrosoftClicked = _useState4[1];

  useEffect(function () {
    if (googleClicked && microsoftClicked) {
      resetState();
    }
  }, [googleClicked, microsoftClicked]);

  var goToGoogleConfig = function goToGoogleConfig() {
    setGoogleClicked(true);
    window.open("https://ads.google.com/aw/billing/paymentmethods", "_blank");
  };

  var goToMicrosoftConfig = function goToMicrosoftConfig() {
    setMicrosoftClicked(true);
    window.open("https://ads.microsoft.com/cc/billing?aid=141562540&cid=168489787&uid=131072422", "_blank");
  };

  var handleFixButton = function handleFixButton() {
    if (!billingCompleted.google) {
      goToGoogleConfig();
    } else {
      goToMicrosoftConfig();
    }
  };

  return /*#__PURE__*/React.createElement(Fill, {
    name: "pmax-creation-step-finish"
  }, /*#__PURE__*/React.createElement(Dialog.Body, {
    display: "grid",
    placeItems: "center",
    gap: "md",
    mb: "lg"
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "title",
    shade: 800,
    align: "center"
  }, translations.error.title), /*#__PURE__*/React.createElement(StyledImage, null), /*#__PURE__*/React.createElement(StyledTypography, {
    variant: "paragraph",
    align: "center"
  }, translations.error.description, "\xA0", /*#__PURE__*/React.createElement(Link, {
    onClick: onSupport
  }, translations.error.support), ".")), /*#__PURE__*/React.createElement(StyledFooter, null, !billingCompleted.google && !billingCompleted.microsoft ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PlatformButton, {
    variant: "terciary",
    color: "primary",
    onClick: goToGoogleConfig
  }, /*#__PURE__*/React.createElement(GoogleAdsCircle, null), translations.google_button), /*#__PURE__*/React.createElement(PlatformButton, {
    variant: "terciary",
    color: "primary",
    onClick: goToMicrosoftConfig,
    autoFocus: "on"
  }, /*#__PURE__*/React.createElement(MicrosoftCircle, null), translations.microsoft_button)) : /*#__PURE__*/React.createElement(Dialog.FooterButton, {
    onClick: handleFixButton,
    autoFocus: "on"
  }, translations.button)));
}

var StyledImage = styled(IllustrationFinishBillingError)(function (_ref2) {
  var theme = _ref2.theme;
  return _defineProperty({
    height: "auto",
    maxWidth: "270px",
    margin: "".concat(theme.spaces.md, " 0")
  }, theme.breakpoints.down("sm"), {
    maxWidth: "200px"
  });
});
var StyledTypography = styled(Typography)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline;\n  & > button {\n    display: inline;\n  }\n"])));
var StyledFooter = styled(Dialog.Footer)(function (_ref4) {
  var theme = _ref4.theme;
  return _defineProperty({
    flexDirection: "row-reverse",
    justifyContent: "space-between",
    flexWrap: "wrap-reverse"
  }, theme.breakpoints.down("sm"), {
    justifyContent: "center"
  });
});
var PlatformButton = styled(Dialog.FooterButton)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  & > span {\n    display: flex;\n    align-items: center;\n    gap: ", ";\n    text-align: left;\n    \n    & > svg {\n      flex-shrink: 0;\n    }\n    \n    @media(min-width: ", "px) {\n      font-size: 16px;\n    }\n  }\n"])), function (props) {
  return props.theme.spaces.sm;
}, function (props) {
  return props.theme.breakpoints.values.lg;
});
export default BillingError;