function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React, { useEffect, useState } from 'react';
import { useHistory, useLocation } from 'react-router-dom';
import { TabList, Tab, TabPanel, TabPanels, useTabs, InputSearch } from '@looker/components';
import { criteriaToSet, tagTypes } from '@looker/sdk-codegen';
import { useSelector } from 'react-redux';
import { useWindowSize } from '../../utils';
import { HEADER_REM } from '../Header';
import { selectSearchCriteria, useSettingActions } from '../../state';
import { SideNavMethodTags } from './SideNavMethodTags';
import { SideNavTypeTags } from './SideNavTypeTags';
import { useDebounce, countMethods, countTypes } from './searchUtils';
import { SearchMessage } from './SearchMessage';
export var SideNav = _ref => {
  var {
    headless = false,
    spec
  } = _ref;
  var history = useHistory();
  var location = useLocation();
  var specKey = spec.key;
  var tabNames = ['methods', 'types'];
  var pathParts = location.pathname.split('/');
  var sideNavTab = pathParts[1] === 'diff' ? pathParts[3] : pathParts[2];
  var defaultIndex = tabNames.indexOf(sideNavTab);

  if (defaultIndex < 0) {
    defaultIndex = tabNames.indexOf('methods');
  }

  var onTabChange = index => {
    var parts = location.pathname.split('/');

    if (parts[1] === 'diff') {
      if (parts[3] !== tabNames[index]) {
        parts[3] = tabNames[index];
        history.push(parts.join('/'));
      }
    } else {
      if (parts[2] !== tabNames[index]) {
        parts[2] = tabNames[index];
        history.push(parts.join('/'));
      }
    }
  };

  var tabs = useTabs({
    defaultIndex,
    onChange: onTabChange
  });
  var searchCriteria = useSelector(selectSearchCriteria);
  var {
    setSearchPatternAction
  } = useSettingActions();
  var [pattern, setSearchPattern] = useState('');
  var debouncedPattern = useDebounce(pattern, 250);
  var [sideNavState, setSideNavState] = useState(() => {
    var _spec$api, _spec$api2, _spec$api3, _spec$api4;

    return {
      tags: (spec === null || spec === void 0 ? void 0 : (_spec$api = spec.api) === null || _spec$api === void 0 ? void 0 : _spec$api.tags) || {},
      typeTags: (spec === null || spec === void 0 ? void 0 : (_spec$api2 = spec.api) === null || _spec$api2 === void 0 ? void 0 : _spec$api2.typeTags) || {},
      methodCount: countMethods((spec === null || spec === void 0 ? void 0 : (_spec$api3 = spec.api) === null || _spec$api3 === void 0 ? void 0 : _spec$api3.tags) || {}),
      typeCount: countTypes((spec === null || spec === void 0 ? void 0 : (_spec$api4 = spec.api) === null || _spec$api4 === void 0 ? void 0 : _spec$api4.types) || {}),
      searchResults: undefined
    };
  });
  var {
    tags,
    typeTags,
    methodCount,
    typeCount,
    searchResults
  } = sideNavState;

  var handleInputChange = value => {
    setSearchPattern(value);
  };

  useEffect(() => {
    var results;
    var newTags;
    var newTypes;
    var newTypeTags;
    var api = spec.api || {};

    if (debouncedPattern && api.search) {
      results = api.search(pattern, criteriaToSet(searchCriteria));
      newTags = results.tags;
      newTypes = results.types;
      newTypeTags = tagTypes(api, results.types);
    } else {
      newTags = api.tags || {};
      newTypes = api.types || {};
      newTypeTags = api.typeTags || {};
    }

    setSideNavState({
      tags: newTags,
      typeTags: newTypeTags,
      typeCount: countTypes(newTypes),
      methodCount: countMethods(newTags),
      searchResults: results
    });
    setSearchPatternAction({
      searchPattern: debouncedPattern
    });
  }, [debouncedPattern, specKey, spec, setSearchPatternAction, pattern, searchCriteria]);
  useEffect(() => {
    var {
      selectedIndex,
      onSelectTab
    } = tabs;

    if (defaultIndex !== selectedIndex) {
      onSelectTab(defaultIndex);
    }
  }, [defaultIndex, tabs]);
  var size = useWindowSize();
  var headlessOffset = headless ? 200 : 120;
  var menuH = size.height - 16 * HEADER_REM - headlessOffset;
  return React.createElement("nav", null, React.createElement(InputSearch, {
    pl: "large",
    pr: "large",
    pb: "large",
    pt: headless ? 'u3' : 'large',
    "aria-label": "Search",
    onChange: handleInputChange,
    placeholder: "Search",
    value: pattern,
    isClearable: true
  }), React.createElement(SearchMessage, {
    search: searchResults
  }), React.createElement(TabList, _extends({}, tabs, {
    distribute: true
  }), React.createElement(Tab, null, "Methods (", methodCount, ")"), React.createElement(Tab, null, "Types (", typeCount, ")")), React.createElement(TabPanels, _extends({}, tabs, {
    pt: "xsmall",
    height: "".concat(menuH, "px"),
    overflow: "auto"
  }), React.createElement(TabPanel, null, React.createElement(SideNavMethodTags, {
    tags: tags,
    specKey: specKey,
    defaultOpen: !!searchResults
  })), React.createElement(TabPanel, null, React.createElement(SideNavTypeTags, {
    tags: typeTags,
    specKey: specKey,
    defaultOpen: !!searchResults
  }))));
};
//# sourceMappingURL=SideNav.js.map