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 Typography from "../../../ui/Typography";
import Checkbox from "../../../ui/next/Checkbox";
import Collapse from "../../../ui/Collapse";
import styled from "../../../ui/styles/styled";
import { usePMaxState } from "../context";
import { nextStep, previousStep, setStep } from "../reducer";
import AccountsSummary from "./AccountsSummary";
import GoalSummary from "./GoalSummary";
import AssetsSummary from "./AssetsSummary";
import { useTrackEvent } from "../events";

function StepSummary(_ref) {
  var translations = _ref.translations,
      accounts = _ref.accounts,
      goalInfo = _ref.goalInfo,
      assetsInfo = _ref.assetsInfo,
      onSubmit = _ref.onSubmit;

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

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

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

  var _useState3 = useState(""),
      _useState4 = _slicedToArray(_useState3, 2),
      email = _useState4[0],
      setEmail = _useState4[1];

  var goToStep = function goToStep(step) {
    return setStep(dispatch, step);
  };

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

  var handleCheck = function handleCheck(ev) {
    setOpenEmail(ev.target.checked);

    if (ev.target.checked && emailTextFieldRef !== null && emailTextFieldRef !== void 0 && emailTextFieldRef.current) {
      emailTextFieldRef.current.focus();
    }
  };

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

    trackEvent({
      key: "step_summary_click_create_campaign"
    });
    onSubmit(continueFn);
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Fill, {
    name: "pmax-creation-step-summary"
  }, /*#__PURE__*/React.createElement(Dialog.Body, {
    minWidth: "500px"
  }, /*#__PURE__*/React.createElement(CssFlex, {
    alignItems: "center",
    gap: "sm"
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "title",
    shade: 800
  }, translations.title)), /*#__PURE__*/React.createElement(AccountsSummary, {
    translations: translations.accounts,
    accounts: accounts,
    goToStep: goToStep
  }), /*#__PURE__*/React.createElement(GoalSummary, {
    translations: translations.goal,
    goalInfo: goalInfo,
    goToStep: goToStep
  }), /*#__PURE__*/React.createElement(AssetsSummary, {
    translations: translations.assets,
    assetsInfo: assetsInfo,
    goToStep: goToStep
  })), /*#__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: handleSubmit
  }, translations.next_button))));
}

var StyledCheckbox = styled(Checkbox)(function (_ref2) {
  var theme = _ref2.theme;
  return _objectSpread(_objectSpread({
    margin: "".concat(theme.spaces.lg, " ").concat(theme.spaces.xs)
  }, theme.typography.variants.inputText), {}, {
    color: theme.colors.neutral[400]
  });
});
var StyledCollapse = styled(Collapse)(function (_ref3) {
  var theme = _ref3.theme;
  return {
    marginLeft: theme.spaces.xl,
    paddingBottom: theme.spaces.lg,
    maxWidth: "270px"
  };
});
export default StepSummary;