"use strict";

var _core = require("@emotion/core");

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _react3 = require("@storybook/react");

var _storybook = require("../../utils/storybook");

var _SidebarNav = require("./SidebarNav");

var _SidebarNav2 = _interopRequireDefault(_SidebarNav);

var _assets = require("../../assets");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

// The active prop should be managed by path rather than component state. This use case is for storybook only
var Component = function Component() {
  var _useState = (0, _react.useState)("general"),
      _useState2 = _slicedToArray(_useState, 2),
      activeNav = _useState2[0],
      setNav = _useState2[1];

  var _useState3 = (0, _react.useState)("site"),
      _useState4 = _slicedToArray(_useState3, 2),
      subNav = _useState4[0],
      setSubNav = _useState4[1];

  var options = [{
    label: "General",
    svg: _assets.General,
    onClick: function onClick() {
      return setNav("general");
    },
    active: activeNav === "general",
    to: "/",
    subItems: [{
      label: "Site Details",
      onClick: function onClick() {
        return setSubNav("site");
      },
      active: subNav === "site",
      to: "#"
    }, {
      label: "Contributors",
      onClick: function onClick() {
        return setSubNav("contributors");
      },
      active: subNav === "contributors",
      to: "#"
    }, {
      label: "Environment Variables",
      onClick: function onClick() {
        return setSubNav("envVars");
      },
      active: subNav === "envVars",
      to: "#"
    }]
  }, {
    label: "Integrations",
    svg: _assets.Integrations,
    onClick: function onClick() {
      return setNav("integrations");
    },
    active: activeNav === "integrations",
    to: "/"
  }, {
    label: "Preview",
    svg: _assets.Preview,
    onClick: function onClick() {
      return setNav("preview");
    },
    active: activeNav === "preview",
    to: "/"
  }, {
    label: "Danger Zone",
    svg: _assets.Skull,
    onClick: function onClick() {
      return setNav("danger");
    },
    active: activeNav === "danger",
    to: "/"
  }];
  return (0, _core.jsx)(_SidebarNav2["default"], {
    options: options,
    style: {
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      paddingLeft: "2rem"
    }
  });
};

(0, _react3.storiesOf)("SidebarNav", module).add("usage example", function () {
  return (0, _core.jsx)(_storybook.StoryUtils.Container, null, (0, _core.jsx)(Component, null));
});