import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import { jsx } from '@emotion/core';
import { Fragment } from 'react';
import _pt from 'prop-types';
import { Link } from 'gatsby';

function SidebarNav(_ref) {
  var options = _ref.options,
      rest = _objectWithoutProperties(_ref, ["options"]);

  return jsx("nav", _extends({
    "aria-label": "sidebar navigation",
    css: function css(theme) {
      return {
        paddingLeft: theme.space[8]
      };
    }
  }, rest), options && jsx(SidebarNavList, null, options.map(function (option) {
    return jsx(SidebarNavListItem, _extends({
      key: option.to
    }, option));
  })));
}
SidebarNav.propTypes = {
  options: _pt.arrayOf(_pt.oneOfType([_pt.shape({
    label: _pt.node.isRequired,
    to: _pt.string,
    active: _pt.bool,
    onClick: _pt.func
  }), _pt.shape({
    Icon: _pt.elementType,
    subItems: _pt.arrayOf(_pt.shape({
      label: _pt.node.isRequired,
      to: _pt.string,
      active: _pt.bool,
      onClick: _pt.func
    }))
  })]))
};

function SidebarNavList(props) {
  return jsx("ul", _extends({
    css: [{
      listStyle: "none",
      margin: 0,
      padding: 0
    }]
  }, props));
}

var baseNavItemCss = function baseNavItemCss(theme) {
  return {
    fontFamily: theme.fonts.body,
    fontSize: theme.fontSizes[1],
    fontWeight: theme.fontWeights.body,
    color: theme.colors.grey[60],
    marginBottom: "0",
    "&:first-of-type": {
      paddingTop: "0"
    },
    "&:last-of-type": {
      paddingBottom: "0"
    }
  };
};

var baseNavItemActiveCss = function baseNavItemActiveCss(theme) {
  return {
    color: theme.colors.purple[50],
    fontWeight: theme.fontWeights.semiBold
  };
};

var navItemIconCss = function navItemIconCss(theme) {
  return {
    color: theme.colors.grey[40],
    fontSize: theme.fontSizes[4],
    verticalAlign: "middle",
    position: "absolute",
    left: "-".concat(theme.space[8])
  };
};

var navItemActiveIconCss = function navItemActiveIconCss(theme) {
  return {
    color: theme.colors.purple[40]
  };
};

function SidebarNavListItem(_ref2) {
  var label = _ref2.label,
      to = _ref2.to,
      active = _ref2.active,
      onClick = _ref2.onClick,
      Icon = _ref2.Icon,
      subItems = _ref2.subItems,
      rest = _objectWithoutProperties(_ref2, ["label", "to", "active", "onClick", "Icon", "subItems"]);

  return jsx(SidebarBaseItem, _extends({
    css: function css(theme) {
      return [{
        position: "relative",
        padding: "".concat(theme.space[3], " 0")
      }];
    },
    label: jsx(Fragment, null, Icon && jsx(Icon, {
      css: function css(theme) {
        return [navItemIconCss(theme), active && navItemActiveIconCss(theme)];
      },
      size: "inherit"
    }), label),
    to: to,
    active: active,
    onClick: onClick,
    current: active ? "page" : undefined
  }, rest), subItems && active && jsx(SidebarNavList, {
    css: function css(theme) {
      return {
        paddingTop: theme.space[5],
        paddingBottom: theme.space[3]
      };
    }
  }, subItems.map(function (subItem) {
    return jsx(SidebarBaseItem, _extends({
      key: subItem.to,
      css: function css(theme) {
        return [{
          paddingTop: theme.space[3],
          paddingRight: theme.space[5],
          paddingBottom: theme.space[3],
          paddingLeft: "calc(".concat(theme.space[6], " + 1px)"),
          marginBottom: "0",
          marginLeft: "calc(-".concat(theme.space[6], " - 2px)"),
          borderLeft: "1px solid ".concat(theme.colors.grey[30])
        }, subItem.active && {
          borderLeftColor: theme.colors.purple[50]
        }];
      },
      current: subItem.active ? "location" : undefined
    }, subItem));
  })));
}

SidebarNavListItem.propTypes = {
  label: _pt.node.isRequired,
  to: _pt.string,
  active: _pt.bool,
  onClick: _pt.func,
  Icon: _pt.elementType,
  subItems: _pt.arrayOf(_pt.shape({
    label: _pt.node.isRequired,
    to: _pt.string,
    active: _pt.bool,
    onClick: _pt.func
  }))
};

var itemLinkCss = function itemLinkCss(theme) {
  return {
    color: "inherit",
    lineHeight: theme.lineHeights.dense,
    textDecoration: "none"
  };
};

function SidebarBaseItem(_ref3) {
  var children = _ref3.children,
      label = _ref3.label,
      to = _ref3.to,
      active = _ref3.active,
      onClick = _ref3.onClick,
      current = _ref3.current,
      rest = _objectWithoutProperties(_ref3, ["children", "label", "to", "active", "onClick", "current"]);

  return jsx("li", _extends({
    css: function css(theme) {
      return [baseNavItemCss(theme), active && baseNavItemActiveCss(theme)];
    }
  }, rest), to ? jsx(Link, {
    to: to,
    onClick: onClick,
    css: itemLinkCss,
    "aria-current": current
  }, label) : label, children);
}

SidebarBaseItem.propTypes = {
  label: _pt.node.isRequired,
  to: _pt.string,
  active: _pt.bool,
  onClick: _pt.func,
  current: _pt.oneOf(["page", "location"])
};
SidebarNav.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "SidebarNav",
  "props": {
    "options": {
      "required": false,
      "tsType": {
        "name": "Array",
        "elements": [{
          "name": "intersection",
          "raw": "SidebarNavItem & {\n  Icon?: React.ComponentType<any>\n  subItems?: SidebarNavItem[]\n}",
          "elements": [{
            "name": "signature",
            "type": "object",
            "raw": "{\n  label: React.ReactNode\n  to?: string\n  active?: boolean\n  onClick?: React.MouseEventHandler<HTMLAnchorElement>\n}",
            "signature": {
              "properties": [{
                "key": "label",
                "value": {
                  "name": "ReactReactNode",
                  "raw": "React.ReactNode",
                  "required": true
                }
              }, {
                "key": "to",
                "value": {
                  "name": "string",
                  "required": false
                }
              }, {
                "key": "active",
                "value": {
                  "name": "boolean",
                  "required": false
                }
              }, {
                "key": "onClick",
                "value": {
                  "name": "ReactMouseEventHandler",
                  "raw": "React.MouseEventHandler<HTMLAnchorElement>",
                  "elements": [{
                    "name": "HTMLAnchorElement"
                  }],
                  "required": false
                }
              }]
            }
          }, {
            "name": "signature",
            "type": "object",
            "raw": "{\n  Icon?: React.ComponentType<any>\n  subItems?: SidebarNavItem[]\n}",
            "signature": {
              "properties": [{
                "key": "Icon",
                "value": {
                  "name": "ReactComponentType",
                  "raw": "React.ComponentType<any>",
                  "elements": [{
                    "name": "any"
                  }],
                  "required": false
                }
              }, {
                "key": "subItems",
                "value": {
                  "name": "Array",
                  "elements": [{
                    "name": "signature",
                    "type": "object",
                    "raw": "{\n  label: React.ReactNode\n  to?: string\n  active?: boolean\n  onClick?: React.MouseEventHandler<HTMLAnchorElement>\n}",
                    "signature": {
                      "properties": [{
                        "key": "label",
                        "value": {
                          "name": "ReactReactNode",
                          "raw": "React.ReactNode",
                          "required": true
                        }
                      }, {
                        "key": "to",
                        "value": {
                          "name": "string",
                          "required": false
                        }
                      }, {
                        "key": "active",
                        "value": {
                          "name": "boolean",
                          "required": false
                        }
                      }, {
                        "key": "onClick",
                        "value": {
                          "name": "ReactMouseEventHandler",
                          "raw": "React.MouseEventHandler<HTMLAnchorElement>",
                          "elements": [{
                            "name": "HTMLAnchorElement"
                          }],
                          "required": false
                        }
                      }]
                    }
                  }],
                  "raw": "SidebarNavItem[]",
                  "required": false
                }
              }]
            }
          }]
        }],
        "raw": "SidebarNavOption[]"
      },
      "description": ""
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/SidebarNav/SidebarNav.tsx"] = {
    name: "SidebarNav",
    docgenInfo: SidebarNav.__docgenInfo,
    path: "src/components/SidebarNav/SidebarNav.tsx"
  };
}

export default SidebarNav;
//# sourceMappingURL=SidebarNav.esm.js.map
