import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React from "react";
import { m } from "framer-motion";
import getClasses from "./styles";
import CssFlex from "../../ui/CssFlex";
import IconButton from "../../ui/next/IconButton";
import Typography from "../../ui/Typography";
import Trash from "../../ui/Icon/Trash";
import Button from "../../ui/next/Button";
import PMAXDeleteModal from "./PMAXDeleteModal";
import { useTrackEvent } from "./events";

var PMAXDraftNotification = function PMAXDraftNotification(_ref) {
  var open = _ref.open,
      translations = _ref.translations,
      step = _ref.step,
      onDelete = _ref.onDelete,
      onContinue = _ref.onContinue,
      isLoading = _ref.isLoading;

  var _React$useState = React.useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      openDelete = _React$useState2[0],
      setOpenDelete = _React$useState2[1];

  var classes = getClasses();
  var trackEvent = useTrackEvent();

  var handleOpenDelete = function handleOpenDelete() {
    trackEvent({
      key: "draft_click_delete"
    });
    setOpenDelete(true);
  };

  var handleContinue = function handleContinue() {
    trackEvent({
      key: "draft_click_continue"
    });
    onContinue();
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, open &&
  /*#__PURE__*/

  /* @ts-ignore */
  React.createElement(CssFlex, {
    p: "md",
    component: m.div,
    justifyContent: "space-between",
    width: "100%",
    className: classes.pmaxNotification,
    initial: {
      opacity: 0,
      scale: 0,
      y: "80px"
    },
    animate: {
      opacity: 1,
      scale: 1,
      y: "0px"
    },
    exit: {
      opacity: 0,
      scale: 0,
      y: "80px"
    },
    transition: {
      duration: 0.25
    }
  }, /*#__PURE__*/React.createElement(CssFlex, {
    gap: "md"
  }, /*#__PURE__*/React.createElement(IconButton, {
    onClick: handleOpenDelete,
    icon: /*#__PURE__*/React.createElement(Trash, null),
    color: "danger"
  }), /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column",
    gap: "xs"
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "small",
    code: ""
  }, translations.title), /*#__PURE__*/React.createElement(Typography, {
    variant: "title2",
    shade: 900
  }, translations.description[step]))), /*#__PURE__*/React.createElement(Button, {
    onClick: handleContinue,
    isLoading: isLoading,
    disabled: isLoading
  }, translations.button)), /*#__PURE__*/React.createElement(PMAXDeleteModal, {
    translations: translations.deleteModal,
    open: openDelete,
    onClose: function onClose() {
      return setOpenDelete(false);
    },
    onContinue: onDelete
  }));
};

export default PMAXDraftNotification;