/** @jsx jsx */
/** @jsxFrag React.Fragment */
import {Global} from '@emotion/core';
import {useConfig, useCurrentDoc} from 'docz';
import {NavGroup} from 'gatsby-theme-docz/src/components/NavGroup';
import {NavLink} from 'gatsby-theme-docz/src/components/NavLink';
import {NavSearch} from 'gatsby-theme-docz/src/components/NavSearch';
import * as styles from 'gatsby-theme-docz/src/components/Sidebar/styles';
import {get} from 'lodash/fp';
import PropTypes from 'prop-types';
import React, {useEffect, useRef} from 'react';
import {Box, jsx} from 'theme-ui';
import {NO_GROUP} from '../../hooks/useExtendedMenus';
import {Container, Group, Label, SearchContainer} from './custom-styles';

export const Sidebar = React.forwardRef(
  ({menus, query, handleChange, onClick, open}, ref) => {
    const currentDocRef = useRef();
    const {
      menuDisplayName = {},
      themeConfig: {menu: {search} = {}} = {},
    } = useConfig();
    const currentDoc = useCurrentDoc();

    useEffect(() => {
      if (ref.current && currentDocRef.current) {
        ref.current.scrollTo(0, currentDocRef.current.offsetTop);
      }
    }, [ref]);

    return (
      <Container>
        <Box onClick={onClick} sx={styles.overlay({open})}>
          {open && <Global styles={styles.global} />}
        </Box>
        <Box
          className="sidebar"
          ref={ref}
          sx={{...styles.wrapper({open}), px: 0}}
          data-testid="sidebar"
        >
          <div>
            {search !== false ? (
              <SearchContainer>
                <NavSearch
                  placeholder="Type to search..."
                  value={query}
                  onChange={handleChange}
                />
              </SearchContainer>
            ) : null}
            {menus &&
              Object.keys(menus).map((key) => (
                <Group key={key}>
                  {key !== NO_GROUP ? <Label>{key}</Label> : null}
                  {(menus[key] || []).map((menu) => {
                    if (!menu) return null;
                    if (!menu.route) {
                      return (
                        <div key={menu.id} className="nav-group">
                          <NavGroup item={menu} sidebarRef={ref} />
                        </div>
                      );
                    }
                    if (menu.route === currentDoc.route) {
                      return (
                        <NavLink key={menu.id} item={menu} ref={currentDocRef}>
                          {get(menu.name, menuDisplayName) || menu.name}
                        </NavLink>
                      );
                    }
                    return (
                      <NavLink key={menu.id} item={menu}>
                        {get(menu.name, menuDisplayName) || menu.name}
                      </NavLink>
                    );
                  })}
                </Group>
              ))}
          </div>
        </Box>
      </Container>
    );
  },
);

Sidebar.propTypes = {
  onClick: PropTypes.func,
  handleChange: PropTypes.func,
  open: PropTypes.bool,
  query: PropTypes.string,
  menus: PropTypes.object,
};