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

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

import React, { useState, useRef, useEffect } from "react";
import { Fill } from "nano-slots";
import Dialog from "../../../ui/lab/Dialog";
import CssFlex from "../../../ui/CssFlex";
import Link from "../../../ui/Link";
import Typography from "../../../ui/Typography";
import User from "../../../ui/Icon/User";
import Telephone from "../../../ui/Icon/Telephone";
import styled from "../../../ui/styles/styled";
import IllustrationWarning from "../assets/IllustrationWarning";
import { usePMaxState } from "../context";
import { nextStep, previousStep } from "../reducer";
import DetectedAccounts from "./DetectedAccounts";
import AccountSelector from "./AccountSelector";
import { TranslationsContext } from "./context";
import { useTrackEvent } from "../events";

function StepConnect(_ref) {
  var translations = _ref.translations,
      detectedAccounts = _ref.detectedAccounts,
      children = _ref.children,
      onSupport = _ref.onSupport,
      onConnectPixel = _ref.onConnectPixel,
      onSubmit = _ref.onSubmit,
      _ref$disabled = _ref.disabled,
      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
      _ref$isLoading = _ref.isLoading,
      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;

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

  var trackEvent = useTrackEvent();
  var buttonRef = useRef();

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      openDialog = _useState2[0],
      setOpenDialog = _useState2[1];

  var handleSubmit = function handleSubmit() {
    var continueFn = function continueFn() {
      return nextStep(dispatch);
    };

    onSubmit(continueFn);
  };

  var handleNext = function handleNext() {
    if (Array.isArray(detectedAccounts) && detectedAccounts.length > 0) {
      trackEvent({
        key: "step_connect_platform_detector_seen"
      });
      setOpenDialog(true);
    } else {
      handleSubmit();
    }
  };

  var handleNextDialog = function handleNextDialog() {
    trackEvent({
      key: "step_connect_platform_detector_continue"
    });
    handleSubmit();
    setOpenDialog(false);
  };

  useEffect(function () {
    trackEvent({
      key: "step_connect_seen"
    });
  }, [trackEvent]);

  var handleSupport = function handleSupport() {
    trackEvent({
      key: "step_click_help"
    });
    onSupport();
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Fill, {
    name: "pmax-creation-step-connect"
  }, /*#__PURE__*/React.createElement(Dialog.Body, null, /*#__PURE__*/React.createElement(CssFlex, {
    alignItems: "center",
    gap: "sm"
  }, /*#__PURE__*/React.createElement(User, {
    color: "primary"
  }), /*#__PURE__*/React.createElement(Typography, {
    variant: "title2",
    shade: 800
  }, translations.title)), /*#__PURE__*/React.createElement(Form, {
    direction: "column",
    gap: "sm"
  }, /*#__PURE__*/React.createElement(Description, {
    variant: "paragraph"
  }, translations.description), /*#__PURE__*/React.createElement(TranslationsContext.Provider, {
    value: translations
  }, children)), Array.isArray(detectedAccounts) && detectedAccounts.length > 0 && /*#__PURE__*/React.createElement(DetectedAccounts, {
    onConnect: onConnectPixel,
    translations: translations.detected_accounts,
    detectedAccounts: detectedAccounts
  }), onSupport && /*#__PURE__*/React.createElement(SupportLink, {
    color: "neutral",
    shade: 400,
    onClick: handleSupport
  }, /*#__PURE__*/React.createElement(Telephone, {
    size: 16,
    shade: 400
  }), translations.support_link)), /*#__PURE__*/React.createElement(Dialog.Footer, null, /*#__PURE__*/React.createElement(Dialog.FooterButton, {
    variant: "terciary",
    onClick: function onClick() {
      return previousStep(dispatch);
    }
  }, translations.back_button), /*#__PURE__*/React.createElement(Dialog.FooterButton, {
    onClick: handleNext,
    disabled: disabled,
    isLoading: isLoading
  }, translations.next_button))), /*#__PURE__*/React.createElement(Dialog, {
    open: openDialog,
    onClose: function onClose() {
      return setOpenDialog(false);
    },
    initialFocusRef: buttonRef
  }, /*#__PURE__*/React.createElement(Dialog.Title, null, translations.detect_dialog.title), /*#__PURE__*/React.createElement(Dialog.Body, {
    display: "grid",
    placeItems: "center",
    gap: "lg"
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "paragraph"
  }, translations.detect_dialog.description), /*#__PURE__*/React.createElement(IllustrationWarning, null)), /*#__PURE__*/React.createElement(Dialog.Footer, null, /*#__PURE__*/React.createElement(Dialog.FooterButton, {
    ref: buttonRef,
    variant: "terciary",
    onClick: function onClick() {
      trackEvent({
        key: "step_connect_platform_detector_back"
      });
      setOpenDialog(false);
    }
  }, translations.detect_dialog.back_button), /*#__PURE__*/React.createElement(Dialog.FooterButton, {
    onClick: handleNextDialog
  }, translations.detect_dialog.next_button))));
}

var SupportLink = styled(Link)(function (_ref2) {
  var theme = _ref2.theme;
  return _objectSpread(_objectSpread({
    display: "inline-flex",
    alignItems: "center",
    gap: theme.spaces.xs,
    marginTop: theme.spaces.lg
  }, theme.typography.variants.small), {}, {
    textDecoration: "underline",
    "& > *": {
      flexShrink: 0
    }
  });
});
var Form = styled(CssFlex)(function (_ref3) {
  var theme = _ref3.theme;
  return _defineProperty({
    margin: theme.spaces.sm,
    marginLeft: theme.spaces.lg
  }, theme.breakpoints.up("md"), {
    paddingRight: theme.spaces.xl
  });
});
var Description = styled(Typography)(function (_ref5) {
  var theme = _ref5.theme;
  return {
    marginLeft: theme.spaces.sm,
    marginBottom: theme.spaces.sm
  };
});
export { AccountSelector };
export default StepConnect;