import React, { Component } from 'react';
import { withRouter, Link } from 'olymp';
import { Menu, Icon } from 'antd';
import { ContentLoader, createComponent } from 'olymp-fela';
import { upperFirst } from 'lodash';
import { Gateway } from 'react-gateway';
import { withItem } from '../decorators';
import { DetailForm } from '../components';

const getFormSchema = ({ fields }) =>
  fields.reduce((result, field) => {
    if (field.type.name === 'Blocks') {
      // if slate => own group
      result[upperFirst(field.name)] = [field];
    } else if (field.type.name === 'Image') {
      // if image => own group
      result[upperFirst(field.name)] = [field];
    } else {
      // Group
      const group = field['@'].detail ? field['@'].detail.arg0 : 'Allgemein';

      if (!result[group]) {
        result[group] = [];
      }
      result[group].push(field);
    }
    return result;
  }, {});

const Flex = createComponent(
  ({ theme }) => ({
    display: 'flex',
    flexDirection: 'column',
    paddingTop: theme.space3,
    '> ul': {
      zIndex: 1,
    },
    '> form': {
      overflow: 'auto',
    },
  }),
  'div',
  []
);

const RightSubMenu = createComponent(
  () => ({
    float: 'right!important',
  }),
  p => <Menu.SubMenu {...p} />,
  p => Object.keys(p)
);
const RightMenuItem = createComponent(
  () => ({
    float: 'right!important',
  }),
  p => <Menu.Item {...p} />,
  p => Object.keys(p)
);

@withRouter
@withItem
export default class CollectionDetail extends Component {
  render() {
    const { id, item, collection, onSave, pathname, query } = this.props;
    const schema = getFormSchema(collection);
    const keys = Object.keys(schema);
    const currentTab = query.tab || Object.keys(schema)[0];
    return (
      <ContentLoader isLoading={id && !item}>
        <Flex>
          <Gateway into="navigation">
            <RightSubMenu>
              <RightMenuItem key="save">
                <span onClick={onSave}>
                  <Icon type="save" /> Speichern
                </span>
              </RightMenuItem>
              {keys.map(tab =>
                (<RightMenuItem key={tab}>
                  <Link to={{ pathname, query: { ...query, tab } }}>
                    {tab}
                  </Link>
                </RightMenuItem>)
              )}
            </RightSubMenu>
          </Gateway>

          <DetailForm
            {...this.props}
            item={item || {}}
            fields={schema[currentTab]}
            onCreate={onSave}
          />
        </Flex>
      </ContentLoader>
    );
  }
}

@@ -1143,27 +1143,24 @@
 %0Aconst Right
-Sub
 Menu = creat
@@ -1234,156 +1234,8 @@
 Menu
-.SubMenu %7B...p%7D /%3E,%0A  p =%3E Object.keys(p)%0A);%0Aconst RightMenuItem = createComponent(%0A  () =%3E (%7B%0A    float: 'right!important',%0A  %7D),%0A  p =%3E %3CMenu.Item
  %7B..
@@ -1705,27 +1705,24 @@
       %3CRight
-Sub
 Menu%3E%0A      
@@ -1730,25 +1730,21 @@
        %3C
-Right
 Menu
+.
 Item key
@@ -1877,33 +1877,29 @@
           %3C/
-Right
 Menu
+.
 Item%3E%0A      
@@ -1941,25 +1941,21 @@
       (%3C
-Right
 Menu
+.
 Item key
@@ -2101,25 +2101,21 @@
       %3C/
-Right
 Menu
+.
 Item%3E)%0A 
@@ -2153,11 +2153,8 @@
 ight
-Sub
 Menu

fix tabs