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

/* eslint-disable camelcase */
import React, { useState } from "react";
import cx from "classnames";
import Dialog from "../../ui/lab/Dialog";
import CssFlex from "../../ui/CssFlex";
import IconButton from "../../ui/next/IconButton";
import ChevronLeft from "../../ui/Icon/ChevronLeft";
import ChevronRight from "../../ui/Icon/ChevronRight";
import IntroCards from "./IntroCards";
import getClasses from "./styles";

var PMAXIntroCards = function PMAXIntroCards(_ref) {
  var open = _ref.open,
      onClose = _ref.onClose,
      onFinish = _ref.onFinish,
      onSkip = _ref.onSkip,
      translations = _ref.translations,
      images = _ref.images;
  var classes = getClasses();

  var _useState = useState(0),
      _useState2 = _slicedToArray(_useState, 2),
      step = _useState2[0],
      setStep = _useState2[1];

  var totalSteps = 4;

  var next = function next() {
    if (step === totalSteps - 1) onFinish();else setStep(step + 1);
  };

  var prev = function prev() {
    if (step === 0) onSkip();else setStep(step - 1);
  };

  return (
    /*#__PURE__*/

    /* @ts-ignore */
    React.createElement(Dialog, {
      open: open,
      onClose: onClose,
      hideTopbar: true,
      className: classes.root
    }, /*#__PURE__*/React.createElement(Dialog.Body, {
      maxWidth: "385px",
      margin: "0 auto"
    }, /*#__PURE__*/React.createElement(IconButton, {
      icon: /*#__PURE__*/React.createElement(ChevronLeft, null),
      color: "primary",
      onClick: prev,
      disabled: step === 0
      /* @ts-ignore */
      ,
      className: cx(classes.iconButton, classes.prevButton)
    }), /*#__PURE__*/React.createElement(IconButton, {
      icon: /*#__PURE__*/React.createElement(ChevronRight, null),
      color: "primary",
      onClick: next,
      disabled: step === totalSteps - 1
      /* @ts-ignore */
      ,
      className: cx(classes.iconButton, classes.nextButton)
    }), /*#__PURE__*/React.createElement(IntroCards, {
      translations: translations,
      step: step,
      images: images
    })), /*#__PURE__*/React.createElement(Dialog.Footer, null, /*#__PURE__*/React.createElement(Dialog.FooterButton, {
      variant: "terciary",
      onClick: onSkip
    }, translations.skip), /*#__PURE__*/React.createElement(CssFlex, {
      gap: "md",
      alignItems: "center"
    }, _toConsumableArray(Array(totalSteps)).map(function (_, index) {
      return /*#__PURE__*/React.createElement("button", {
        key: index,
        type: "button"
        /* @ts-ignore */
        ,
        className: cx(classes.circleButton, _defineProperty({}, classes.selected, step === index)),
        onClick: function onClick() {
          return setStep(index);
        }
      }, " ");
    })), /*#__PURE__*/React.createElement(Dialog.FooterButton, {
      variant: "terciary",
      color: "primary",
      onClick: next
    }, step === totalSteps - 1 ? translations.finish : translations.next)))
  );
};

export default PMAXIntroCards;