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

var _templateObject, _templateObject2;

import _regeneratorRuntime from "@babel/runtime/regenerator";
// @ts-nocheck
import React, { useState } from "react";
import { Fill } from "nano-slots";
import Dialog from "../../../../ui/lab/Dialog";
import Typography from "../../../../ui/Typography";
import GoogleAdsCircle from "../../../../ui/BrandIcon/GoogleAdsCircle";
import MicrosoftCircle from "../../../../ui/BrandIcon/MicrosoftCircle";
import styled from "../../../../ui/styles/styled";
import IllustrationFinishNoBilling from "../../assets/illustration-finish-no-billing";
import BillingError from "./BillingError";

function NoBilling(_ref) {
  var translations = _ref.translations,
      billingCompleted = _ref.billingCompleted,
      onVerify = _ref.onVerify,
      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];

  var _useState5 = useState(false),
      _useState6 = _slicedToArray(_useState5, 2),
      isLoading = _useState6[0],
      setIsLoading = _useState6[1];

  var _useState7 = useState(false),
      _useState8 = _slicedToArray(_useState7, 2),
      verified = _useState8[0],
      setVerified = _useState8[1];

  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 handleVerify = /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              setIsLoading(true);
              _context.next = 3;
              return onVerify();

            case 3:
              setIsLoading(false);
              setVerified(true);

            case 5:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));

    return function handleVerify() {
      return _ref2.apply(this, arguments);
    };
  }();

  var handleFixButton = function handleFixButton() {
    if (!billingCompleted.google) {
      goToGoogleConfig();
    } else {
      goToMicrosoftConfig();
    }
  }; // NoBilling component is only rendered if there is any billing issue


  if (verified) {
    return /*#__PURE__*/React.createElement(BillingError, {
      translations: translations,
      billingCompleted: billingCompleted,
      resetState: function resetState() {
        return setVerified(false);
      },
      onSupport: onSupport
    });
  }

  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"
  }, googleClicked && microsoftClicked ? translations.waiting.title : translations.title), /*#__PURE__*/React.createElement(StyledImage, null), /*#__PURE__*/React.createElement(StyledTypography, {
    variant: "paragraph",
    align: "center"
  }, googleClicked && microsoftClicked ? translations.waiting.description : translations.description)), /*#__PURE__*/React.createElement(StyledFooter, null, googleClicked && microsoftClicked && /*#__PURE__*/React.createElement(Dialog.FooterButton, {
    onClick: handleVerify,
    isLoading: isLoading,
    autoFocus: "on"
  }, translations.waiting.button), !(googleClicked && microsoftClicked) && !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)), !(googleClicked && microsoftClicked) && (billingCompleted.google || billingCompleted.microsoft) && /*#__PURE__*/React.createElement(Dialog.FooterButton, {
    onClick: handleFixButton,
    autoFocus: "on"
  }, translations.button)));
}

var StyledImage = styled(IllustrationFinishNoBilling)(function (_ref3) {
  var theme = _ref3.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  & > 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)(function (_ref5) {
  var theme = _ref5.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 NoBilling;