"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.GetStartedComponent = exports.GetStarted = void 0;
var _eui = require("@elastic/eui");
var _react = _interopRequireDefault(require("react"));
var _sharedUxPageKibanaTemplate = require("@kbn/shared-ux-page-kibana-template");
var _react2 = require("@emotion/react");
var _welcome_panel = require("./welcome_panel");
var _toggle_panel = require("./toggle_panel");
var _translations = require("./translations");
var _product_switch = require("./product_switch");
var _use_toggle_panel = require("./use_toggle_panel");
/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License
 * 2.0; you may not use this file except in compliance with the Elastic License
 * 2.0.
 */

const CONTENT_WIDTH = 1150;
const GetStartedComponent = ({
  productTypes
}) => {
  const {
    euiTheme
  } = (0, _eui.useEuiTheme)();
  const shadow = (0, _eui.useEuiShadow)('s');
  const {
    onProductSwitchChanged,
    onCardClicked,
    onStepClicked,
    onStepButtonClicked,
    state: {
      activeProducts,
      activeSections,
      finishedSteps,
      totalActiveSteps,
      totalStepsLeft,
      expandedCardSteps
    }
  } = (0, _use_toggle_panel.useTogglePanel)({
    productTypes
  });
  return /*#__PURE__*/_react.default.createElement(_sharedUxPageKibanaTemplate.KibanaPageTemplate, {
    restrictWidth: false,
    contentBorder: false,
    grow: true
    /* this is the only page without padding in Security Solution,
     **  ignoring main page wrapper padding using absolute positioning
     */,
    css: (0, _react2.css)`
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        position: absolute;
      `
  }, /*#__PURE__*/_react.default.createElement(_sharedUxPageKibanaTemplate.KibanaPageTemplate.Header, {
    restrictWidth: CONTENT_WIDTH,
    css: (0, _react2.css)`
          padding: 0 ${euiTheme.base * 2.25}px;
        `,
    pageTitle: /*#__PURE__*/_react.default.createElement(_eui.EuiTitle, {
      size: "l",
      css: (0, _react2.css)`
              padding-left: ${euiTheme.size.xs};
            `
    }, /*#__PURE__*/_react.default.createElement("span", null, _translations.GET_STARTED_PAGE_TITLE)),
    description: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("strong", {
      className: "eui-displayBlock"
    }, _translations.GET_STARTED_PAGE_SUBTITLE), /*#__PURE__*/_react.default.createElement("span", {
      className: "eui-displayBlock"
    }, _translations.GET_STARTED_PAGE_DESCRIPTION))
  }, /*#__PURE__*/_react.default.createElement(_welcome_panel.WelcomePanel, {
    totalActiveSteps: totalActiveSteps,
    totalStepsLeft: totalStepsLeft
  })), /*#__PURE__*/_react.default.createElement(_sharedUxPageKibanaTemplate.KibanaPageTemplate.Section, {
    bottomBorder: false,
    grow: true,
    restrictWidth: CONTENT_WIDTH,
    paddingSize: "none",
    css: (0, _react2.css)`
          ${shadow};
          z-index: 1;
          flex-grow: 0;
          padding: 0 ${euiTheme.base * 2.25}px;
        `
  }, /*#__PURE__*/_react.default.createElement(_product_switch.ProductSwitch, {
    onProductSwitchChanged: onProductSwitchChanged,
    activeProducts: activeProducts,
    euiTheme: euiTheme
  })), /*#__PURE__*/_react.default.createElement(_sharedUxPageKibanaTemplate.KibanaPageTemplate.Section, {
    bottomBorder: "extended",
    grow: true,
    restrictWidth: CONTENT_WIDTH,
    paddingSize: "none",
    css: (0, _react2.css)`
          padding: 0 ${euiTheme.base * 2.25}px;
        `
  }, /*#__PURE__*/_react.default.createElement(_toggle_panel.TogglePanel, {
    finishedSteps: finishedSteps,
    activeSections: activeSections,
    activeProducts: activeProducts,
    expandedCardSteps: expandedCardSteps,
    onStepClicked: onStepClicked,
    onCardClicked: onCardClicked,
    onStepButtonClicked: onStepButtonClicked
  })));
};
exports.GetStartedComponent = GetStartedComponent;
GetStartedComponent.displayName = 'GetStartedComponent';
const GetStarted = /*#__PURE__*/_react.default.memo(GetStartedComponent);

// eslint-disable-next-line import/no-default-export
exports.GetStarted = GetStarted;
var _default = GetStarted;
exports.default = _default;