import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { Accordion2, Heading } from '@looker/components';
import { useSelector } from 'react-redux';
import { useHistory, useRouteMatch } from 'react-router-dom';
import { Link } from '../Link';
import { buildMethodPath, highlightHTML } from '../../utils';
import { selectSearchPattern } from '../../state';
export var SideNavMethods = styled(_ref => {
  var {
    className,
    methods,
    tag,
    specKey,
    defaultOpen = false
  } = _ref;
  var searchPattern = useSelector(selectSearchPattern);
  var match = useRouteMatch("/:specKey/methods/:methodTag/:methodName?");
  var [isOpen, setIsOpen] = useState(defaultOpen);
  var history = useHistory();

  var handleOpen = () => {
    var _isOpen = !isOpen;

    setIsOpen(_isOpen);
    if (_isOpen) history.push("/".concat(specKey, "/methods/").concat(tag));
  };

  useEffect(() => {
    var status = match ? defaultOpen || match.params.methodTag === tag : defaultOpen;
    setIsOpen(status);
  }, [defaultOpen, match, tag]);
  return React.createElement(Accordion2, {
    isOpen: isOpen,
    toggleOpen: handleOpen,
    className: className,
    label: React.createElement(Heading, {
      as: "h4",
      fontSize: "small",
      py: "xsmall"
    }, highlightHTML(searchPattern, tag))
  }, React.createElement("ul", null, Object.values(methods).map(method => React.createElement("li", {
    key: method.name
  }, React.createElement(Link, {
    to: "".concat(buildMethodPath(specKey, tag, method.name))
  }, highlightHTML(searchPattern, method.summary))))));
}).withConfig({
  displayName: "SideNavMethods",
  componentId: "sc-1qqmwk8-0"
})(["font-family:", ";[aria-controls]:hover,[aria-expanded='true']{h4,svg{color:", ";}}[aria-expanded='true'] h4{font-weight:", ";}ul{border-left:dashed 1px ", ";list-style:none;margin:0;padding:0;padding-left:", ";padding-top:", ";}[aria-current]{background:", ";font-weight:", ";}", "{border-radius:", ";display:block;overflow:hidden;padding:", ";text-overflow:ellipsis;white-space:nowrap;&:hover,&:focus,&.active{background:", ";}}"], _ref2 => {
  var {
    theme
  } = _ref2;
  return theme.fonts.brand;
}, _ref3 => {
  var {
    theme
  } = _ref3;
  return theme.colors.key;
}, _ref4 => {
  var {
    theme
  } = _ref4;
  return theme.fontWeights.semiBold;
}, _ref5 => {
  var {
    theme
  } = _ref5;
  return theme.colors.ui2;
}, _ref6 => {
  var {
    theme
  } = _ref6;
  return theme.space.xxsmall;
}, _ref7 => {
  var {
    theme
  } = _ref7;
  return theme.space.xxsmall;
}, _ref8 => {
  var {
    theme
  } = _ref8;
  return theme.colors.ui1;
}, _ref9 => {
  var {
    theme
  } = _ref9;
  return theme.fontWeights.semiBold;
}, Link, _ref10 => {
  var {
    theme
  } = _ref10;
  return theme.radii.medium;
}, _ref11 => {
  var {
    theme
  } = _ref11;
  return theme.space.xsmall;
}, _ref12 => {
  var {
    theme
  } = _ref12;
  return theme.colors.ui1;
});
//# sourceMappingURL=SideNavMethods.js.map