"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TutorialDirectory = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _lodash = _interopRequireDefault(require("lodash"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _eui = require("@elastic/eui");
var _i18nReact = require("@kbn/i18n-react");
var _homeSampleDataTab = require("@kbn/home-sample-data-tab");
var _i18n = require("@kbn/i18n");
var _synopsis = require("./synopsis");
var _kibana_services = require("../kibana_services");
var _public = require("@kbn/kibana-react-plugin/public");
var _load_tutorials = require("../load_tutorials");
/*
 * 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 and the Server Side Public License, v 1; you may not use this file except
 * in compliance with, at your election, the Elastic License 2.0 or the Server
 * Side Public License, v 1.
 */

const SAMPLE_DATA_TAB_ID = 'sampleData';
const integrationsTitle = _i18n.i18n.translate('home.breadcrumbs.integrationsAppTitle', {
  defaultMessage: 'Integrations'
});
class TutorialDirectoryUi extends _react.default.Component {
  constructor(props) {
    super(props);
    (0, _defineProperty2.default)(this, "setBreadcrumbs", () => {
      const tab = this.getSelectedTab();
      const breadcrumbs = [{
        text: integrationsTitle,
        href: this.props.addBasePath(`/app/integrations/browse`)
      }];
      if (tab !== null && tab !== void 0 && tab.name) {
        breadcrumbs.push({
          text: tab.name
        });
      }
      (0, _kibana_services.getServices)().chrome.setBreadcrumbs(breadcrumbs);
    });
    (0, _defineProperty2.default)(this, "onSelectedTabChanged", id => {
      this.setState({
        selectedTabId: id
      });
    });
    (0, _defineProperty2.default)(this, "getTabs", () => {
      return this.tabs.map(tab => ({
        label: tab.name,
        onClick: () => this.onSelectedTabChanged(tab.id),
        isSelected: tab.id === this.state.selectedTabId,
        'data-test-subj': `homeTab-${tab.id}`
      }));
    });
    (0, _defineProperty2.default)(this, "getSelectedTab", () => {
      return this.tabs.find(({
        id
      }) => id === this.state.selectedTabId);
    });
    (0, _defineProperty2.default)(this, "renderTabContent", () => {
      const tab = this.getSelectedTab();
      if (tab !== null && tab !== void 0 && tab.content) {
        return tab.content;
      }
      return /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGrid, {
        columns: 4
      }, this.state.tutorialCards.filter(tutorial => {
        return this.state.selectedTabId === SAMPLE_DATA_TAB_ID || this.state.selectedTabId === tutorial.category;
      }).map(tutorial => {
        return /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
          "data-test-subj": `homeTab-${tutorial.name}`,
          key: tutorial.name
        }, /*#__PURE__*/_react.default.createElement(_synopsis.Synopsis, {
          id: tutorial.id,
          iconType: tutorial.icon,
          description: tutorial.description,
          title: tutorial.name,
          wrapInPanel: true,
          url: tutorial.url,
          onClick: tutorial.onClick,
          isBeta: tutorial.isBeta
        }));
      }));
    });
    (0, _defineProperty2.default)(this, "renderHeaderLinks", () => {
      const headerLinks = (0, _kibana_services.getServices)().tutorialService.getDirectoryHeaderLinks();
      return headerLinks.length ? /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, {
        gutterSize: "m",
        alignItems: "center"
      }, headerLinks.map((HeaderLink, index) => /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
        key: index
      }, /*#__PURE__*/_react.default.createElement(HeaderLink, null)))) : null;
    });
    const extraTabs = (0, _kibana_services.getServices)().addDataService.getAddDataTabs();
    this.tabs = [{
      id: SAMPLE_DATA_TAB_ID,
      name: this.props.intl.formatMessage({
        id: 'home.tutorial.tabs.sampleDataTitle',
        defaultMessage: 'Sample data'
      }),
      content: /*#__PURE__*/_react.default.createElement(_homeSampleDataTab.SampleDataTab, null)
    }, ...extraTabs.map(({
      id,
      name,
      component: Component
    }) => ({
      id,
      name,
      content: /*#__PURE__*/_react.default.createElement(Component, null)
    }))];
    let openTab = SAMPLE_DATA_TAB_ID;
    if (props.openTab && this.tabs.some(tab => {
      return tab.id === props.openTab;
    })) {
      openTab = props.openTab;
    }
    this.state = {
      selectedTabId: openTab,
      tutorialCards: []
    };
  }
  componentWillUnmount() {
    this._isMounted = false;
  }
  async componentDidMount() {
    this._isMounted = true;
    this.setBreadcrumbs();
    const tutorialConfigs = await (0, _load_tutorials.getTutorials)();
    if (!this._isMounted) {
      return;
    }
    let tutorialCards = tutorialConfigs.map(tutorialConfig => {
      // add base path to SVG based icons
      let icon = tutorialConfig.euiIconType;
      if (icon && icon.includes('/')) {
        icon = this.props.addBasePath(icon);
      }
      return {
        id: tutorialConfig.id,
        category: tutorialConfig.category,
        icon: icon,
        name: tutorialConfig.name,
        description: tutorialConfig.shortDescription,
        url: this.props.addBasePath(`#/tutorial/${tutorialConfig.id}`),
        elasticCloud: tutorialConfig.elasticCloud
        // Beta label is skipped on the tutorial overview page for now. Too many beta labels.
        //isBeta: tutorialConfig.isBeta,
      };
    });

    // Add card for sample data that only gets show in "all" tab
    tutorialCards.push({
      id: 'sample_data',
      name: this.props.intl.formatMessage({
        id: 'home.tutorial.card.sampleDataTitle',
        defaultMessage: 'Sample Data'
      }),
      description: this.props.intl.formatMessage({
        id: 'home.tutorial.card.sampleDataDescription',
        defaultMessage: 'Get started exploring Kibana with these "one click" data sets.'
      }),
      url: this.props.addBasePath('#/tutorial_directory/sampleData'),
      elasticCloud: true,
      onClick: this.onSelectedTabChanged.bind(null, SAMPLE_DATA_TAB_ID)
    });
    if (this.props.isCloudEnabled) {
      tutorialCards = tutorialCards.filter(tutorial => {
        return _lodash.default.has(tutorial, 'elasticCloud');
      });
    }
    tutorialCards.sort((a, b) => {
      return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
    });
    this.setState({
      // eslint-disable-line react/no-did-mount-set-state
      tutorialCards: tutorialCards
    });
  }
  componentDidUpdate(prevProps, prevState) {
    if (prevState.selectedTabId !== this.state.selectedTabId) {
      this.setBreadcrumbs();
    }
  }
  render() {
    const headerLinks = this.renderHeaderLinks();
    const tabs = this.getTabs();
    return /*#__PURE__*/_react.default.createElement(_public.KibanaPageTemplate, {
      restrictWidth: 1200,
      template: "empty",
      pageHeader: {
        pageTitle: /*#__PURE__*/_react.default.createElement(_i18nReact.FormattedMessage, {
          id: "home.tutorial.addDataToKibanaTitle",
          defaultMessage: "More ways to add data"
        }),
        description: /*#__PURE__*/_react.default.createElement(_i18nReact.FormattedMessage, {
          id: "home.tutorial.addDataToKibanaDescription",
          defaultMessage: "In addition to adding {integrationsLink}, you can try our sample data or upload your own data.",
          values: {
            integrationsLink: /*#__PURE__*/_react.default.createElement(_eui.EuiLink, {
              href: this.props.addBasePath(`/app/integrations/browse`)
            }, /*#__PURE__*/_react.default.createElement(_i18nReact.FormattedMessage, {
              id: "home.tutorial.addDataToKibanaDescription.integrations",
              defaultMessage: "integrations"
            }))
          }
        }),
        tabs,
        rightSideItems: headerLinks ? [headerLinks] : []
      }
    }, this.renderTabContent());
  }
}
TutorialDirectoryUi.propTypes = {
  addBasePath: _propTypes.default.func.isRequired,
  openTab: _propTypes.default.string,
  isCloudEnabled: _propTypes.default.bool.isRequired
};
const TutorialDirectory = (0, _i18nReact.injectI18n)(TutorialDirectoryUi);
exports.TutorialDirectory = TutorialDirectory;