import React from 'react';
import { compose, withState, withHandlers } from 'recompose';
import { withLang } from 'olymp-utils';
import { createReplaceQuery, createPushPathname } from 'olymp-router';
import { getAuth } from 'olymp-auth0';
import { Avatar, Logo, Menu, Sidebar, Search } from 'olymp-fela';
import {
  FaCubes,
  FaPictureO,
  FaSearch,
  FaPowerOff,
  FaDatabase,
  FaBarChart,
} from 'olymp-icons';
import { get } from 'lodash';
import { Icon } from 'antd';
import { connect } from 'react-redux';

const enhance = compose(
  withLang,
  getAuth,
  connect(
    ({ location, auth }) => ({
      pathname: location.pathname,
      query: location.query,
      user: auth.user,
      isAdmin: auth.user && auth.user.isAdmin,
    }),
    dispatch => ({
      setQuery: createReplaceQuery(dispatch),
      push: createPushPathname(dispatch),
    }),
  ),
  withState('collapsed', 'setCollapsed', true),
  withState('searchOpen', 'setSearchOpen', false),
  withState('searchText', 'setSearchText', ''),
  withHandlers({
    expand: ({ setCollapsed }) => () => setCollapsed(false),
    collapse: ({ setCollapsed }) => () => setCollapsed(true),
    handleClick: ({ setQuery, logout, setCollapsed }) => e => {
      if (e.key === 'logout') {
        logout();
      }
      if (e.key && e.key[0] === '@') {
        const v = e.key.split(',').reduce((state, next) => {
          const key = next.indexOf('=') !== -1 ? next.split('=')[0] : next;
          const value = next.indexOf('=') !== -1 ? next.split('=')[1] : null;
          return {
            ...state,
            [key]: value,
          };
        }, {});
        setCollapsed(false); // close Menu

        setQuery(v);
      }
    },
  }),
);

const component = enhance(
  ({
    logout,
    query,
    collectionTree,
    setQuery,
    user = {},
    collapsed,
    setCollapsed,
    searchOpen,
    setSearchOpen,
    children,
    searchText,
    setSearchText,
  }) => {
    const keys = Object.keys(query);

    if (!keys.filter(x => x[0] === '@').length) {
      keys.push('@home');
    }

    const lists = [];
    const items = [];
    Object.keys(collectionTree).forEach(
      key =>
        collectionTree[key].length > 1
          ? lists.push(
            <Menu.List title={key} key={key}>
              {collectionTree[key].map((collection, i) => (
                <Menu.Item
                  key={collection.id || i}
                  icon={
                      collection.specialFields.icon ? (
                        <Icon
                          type={collection.specialFields.icon}
                          style={{ fontSize: 20 }}
                        />
                      ) : (
                        <FaDatabase />
                      )
                    }
                  active={
                      query[`@${collection.name.toLowerCase()}`] !== undefined
                    }
                  onClick={() =>
                      setQuery({
                        [`@${collection.name.toLowerCase()}`]: null,
                      })}
                >
                  {get(collection, 'specialFields.label', collection.name)}
                </Menu.Item>
                ))}
            </Menu.List>,
            )
          : items.push(
            <Menu.Item
              key={key}
              icon={
                  collectionTree[key][0].specialFields.icon ? (
                    <Icon
                      type={collectionTree[key][0].specialFields.icon}
                      style={{ fontSize: 20 }}
                    />
                  ) : (
                    <FaDatabase />
                  )
                }
              active={
                  query[`@${collectionTree[key][0].name.toLowerCase()}`] !==
                  undefined
                }
              onClick={() =>
                  setQuery({
                    [`@${collectionTree[key][0].name.toLowerCase()}`]: null,
                  })}
            >
              {get(
                  collectionTree[key][0],
                  'specialFields.label',
                  collectionTree[key][0].name,
                )}
            </Menu.Item>,
            ),
    );

    const header = (
      <Menu.Item
        large
        key="back"
        icon={<Logo color />}
        onClick={() => setQuery({})}
      >
        Olymp
      </Menu.Item>
    );

    return (
      <Sidebar
        zIndex={11}
        collapsed={collapsed}
        overlap
        onMouseEnter={() => setCollapsed(false)}
        onMouseLeave={() => setCollapsed(true)}
        menu={
          <Menu color="colorSecondary" inverted header={header}>
            <Menu.Item
              active={Object.keys(query).length === 0}
              icon={<FaCubes />}
              onClick={() => setQuery({})}
            >
              Seitenmanager
            </Menu.Item>
            <Menu.Item
              icon={<FaPictureO />}
              active={query[`@media`] === null}
              onClick={() => setQuery({ '@media': null })}
            >
              Mediathek
            </Menu.Item>
            {!!window.ga && (
              <Menu.Item
                icon={<FaBarChart />}
                active={query[`@analytics`] === null}
                onClick={() => setQuery({ '@analytics': null })}
              >
                Statistiken
              </Menu.Item>
            )}
            <Menu.List title="Collections">{items}</Menu.List>
            {lists}
            <Menu.Space />
            <Menu.Item
              onClick={() => {
                setSearchOpen(true);
                setCollapsed(true);
              }}
              icon={<FaSearch />}
            >
              Suche
            </Menu.Item>
            <Menu.Item
              active={query[`@users`] === user.id}
              onClick={() => setQuery({ '@users': user.id })}
              icon={
                <Avatar email={user.email} name={user.name} default="blank" />
              }
            >
              {user.name}
            </Menu.Item>
            <Menu.Item onClick={logout} icon={<FaPowerOff />}>
              Abmelden
            </Menu.Item>
          </Menu>
        }
      >
        {children}

        <Search
          placeholder="Suche ..."
          value={searchText}
          onChange={setSearchText}
          open={searchOpen}
          header={header}
          results={
            searchText
              ? [
                  { id: 1, name: 'Test 1' },
                  { id: 2, name: 'Test 2' },
                  { id: 3, name: 'Test 3' },
                ]
              : []
          }
          onClose={() => {
            setSearchOpen(false);
          }}
        />
      </Sidebar>
    );
  },
);

export default component;

@@ -386,16 +386,27 @@
 rChart,%0A
+  FaUsers,%0A
 %7D from '
@@ -5100,32 +5100,267 @@
    %3C/Menu.Item%3E%0A
+            %3CMenu.Item%0A              icon=%7B%3CFaUsers /%3E%7D%0A              active=%7Bquery%5B%60@users%60%5D === null%7D%0A              onClick=%7B() =%3E setQuery(%7B '@users': null %7D)%7D%0A            %3E%0A              Benutzer & Gruppen%0A            %3C/Menu.Item%3E%0A
             %7B!!w

add users/goups to navigation