import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useCallback, useEffect, useState } from "react";
import styled from "styled-components";
import { Carousel } from "@webiny/ui/Carousel";
import { connect } from "../../../redux";
import { isPluginActive } from "../../../selectors";
import { useKeyHandler } from "../../../hooks/useKeyHandler";
import { ReactComponent as NextSlideIcon } from "@svgr/webpack!./assets/next-slide.svg";
import { ReactComponent as PrevSlideIcon } from "@svgr/webpack!./assets/prev-slide.svg";
import Slide1 from "./slides/Slide1";
import Slide2 from "./slides/Slide2";
import Slide3 from "./slides/Slide3";
import Slide4 from "./slides/Slide4";
import Slide5 from "./slides/Slide5";
import Slide6 from "./slides/Slide6";
import Slide7 from "./slides/Slide7";
var Overlay = /*#__PURE__*/styled("div", {
  target: "e1r5exco0",
  label: "Overlay"
})({
  position: "fixed",
  top: 0,
  left: 0,
  width: "100vw",
  height: "100vh",
  backgroundColor: "rgba(0,0,0,0.5)",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  ".slider-control-centerright": {
    right: "-50px !important"
  },
  ".slider-control-centerleft": {
    left: "-50px !important"
  },
  ".slider-control-bottomcenter": {
    bottom: "-50px !important"
  }
});
var OutsideContainer = /*#__PURE__*/styled("div", {
  target: "e1r5exco1",
  label: "OutsideContainer"
})({
  width: "100%",
  height: "100%",
  position: "absolute"
});
var Container = /*#__PURE__*/styled("div", {
  target: "e1r5exco2",
  label: "Container"
})({
  width: 800,
  height: 600,
  backgroundColor: "var(--mdc-theme-surface)",
  borderRadius: 2,
  color: "var(--mdc-theme-text-primary-on-background)"
});
var InnerContainer = /*#__PURE__*/styled("div", {
  target: "e1r5exco3",
  label: "InnerContainer"
})({
  width: "100%",
  height: "100%",
  display: "flex"
});
var SlideControl = /*#__PURE__*/styled("div", {
  target: "e1r5exco4",
  label: "SlideControl"
})({
  background: "var(--mdc-theme-surface)",
  boxShadow: "0 6px 6px 0 rgba(0,0,0,0.26), 0 10px 20px 0 rgba(0,0,0,0.19)",
  borderRadius: "50%",
  width: 40,
  height: 40,
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  cursor: "pointer",
  color: "var(--mdc-theme-text-secondary-on-background)",
  "&:hover": {
    background: "var(--mdc-theme-background)"
  }
});

var Onboarding = function Onboarding(_ref) {
  var deactivatePlugin = _ref.deactivatePlugin,
      showOnboarding = _ref.showOnboarding;

  var _useState = useState(0),
      _useState2 = _slicedToArray(_useState, 2),
      slideIndex = _useState2[0],
      setSlideIndex = _useState2[1];

  var _useKeyHandler = useKeyHandler(),
      addKeyHandler = _useKeyHandler.addKeyHandler,
      removeKeyHandler = _useKeyHandler.removeKeyHandler;

  var nextSlide = useCallback(function () {
    setSlideIndex(slideIndex + 1);
  }, [slideIndex]);
  var closeDialog = useCallback(function () {
    setSlideIndex(0);
    deactivatePlugin({
      name: "pb-editor-toolbar-onboarding"
    });
  }, [setSlideIndex]);
  useEffect(function () {
    showOnboarding ? addKeyHandler("escape", closeDialog) : removeKeyHandler("escape");
  });

  if (!showOnboarding) {
    return null;
  }

  return /*#__PURE__*/React.createElement(Overlay, null, /*#__PURE__*/React.createElement(OutsideContainer, {
    onClick: closeDialog
  }), /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Carousel, {
    speed: slideIndex < 1 || slideIndex > 4 ? 500 : 0,
    dragging: true,
    transitionMode: "scroll",
    slideIndex: slideIndex,
    afterSlide: setSlideIndex,
    renderNextSlide: function renderNextSlide(_ref2) {
      var nextSlide = _ref2.nextSlide,
          currentSlide = _ref2.currentSlide;
      return currentSlide < 6 && /*#__PURE__*/React.createElement(SlideControl, {
        onClick: nextSlide
      }, /*#__PURE__*/React.createElement(NextSlideIcon, null));
    },
    renderPreviousSlide: function renderPreviousSlide(_ref3) {
      var previousSlide = _ref3.previousSlide,
          currentSlide = _ref3.currentSlide;
      return currentSlide > 0 && /*#__PURE__*/React.createElement(SlideControl, {
        onClick: previousSlide
      }, /*#__PURE__*/React.createElement(PrevSlideIcon, null));
    }
  }, /*#__PURE__*/React.createElement(InnerContainer, null, /*#__PURE__*/React.createElement(Slide1, {
    nextSlide: nextSlide
  })), /*#__PURE__*/React.createElement(InnerContainer, null, /*#__PURE__*/React.createElement(Slide2, {
    currentSlide: slideIndex + 1
  })), /*#__PURE__*/React.createElement(InnerContainer, null, /*#__PURE__*/React.createElement(Slide3, {
    currentSlide: slideIndex + 1
  })), /*#__PURE__*/React.createElement(InnerContainer, null, /*#__PURE__*/React.createElement(Slide4, {
    currentSlide: slideIndex + 1
  })), /*#__PURE__*/React.createElement(InnerContainer, null, /*#__PURE__*/React.createElement(Slide5, {
    currentSlide: slideIndex + 1
  })), /*#__PURE__*/React.createElement(InnerContainer, null, /*#__PURE__*/React.createElement(Slide6, {
    currentSlide: slideIndex + 1
  })), /*#__PURE__*/React.createElement(InnerContainer, null, /*#__PURE__*/React.createElement(Slide7, {
    closeDialog: closeDialog
  })))));
};

var mapDispatchToProps = function mapDispatchToProps(dispatch) {
  return {
    deactivatePlugin: function deactivatePlugin(payload) {
      dispatch({
        type: 'ui/deactivatePlugin',
        payload: payload
      });
    }
  };
};

export default connect(function (state) {
  return {
    showOnboarding: isPluginActive("pb-editor-toolbar-onboarding")(state)
  };
}, mapDispatchToProps)( /*#__PURE__*/React.memo(Onboarding));
//# sourceMappingURL=Onboarding.js.map