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(
  () => ({
    display: 'flex',
    flexDirection: 'column',
    '> 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">
            <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>)
            )}
          </Gateway>
          <br />
          <DetailForm
            {...this.props}
            item={item || {}}
            fields={schema[currentTab]}
            onCreate={onSave}
          />
        </Flex>
      </ContentLoader>
    );
  }
}

@@ -922,32 +922,41 @@
 teComponent(%0A  (
+%7B theme %7D
 ) =%3E (%7B%0A    disp
@@ -997,16 +997,46 @@
 olumn',%0A
+    paddingTop: theme.space3,%0A
     '%3E u
@@ -1842,16 +1842,45 @@
 ation%22%3E%0A
+            %3CRightSubMenu%3E%0A  
         
@@ -1924,16 +1924,18 @@
         
+ 
+ 
 %3Cspan on
@@ -1950,16 +1950,18 @@
 nSave%7D%3E%0A
+  
         
@@ -1999,16 +1999,18 @@
 eichern%0A
+  
         
@@ -2027,32 +2027,34 @@
 an%3E%0A            
+  
 %3C/RightMenuItem%3E
@@ -2054,16 +2054,18 @@
 nuItem%3E%0A
+  
         
@@ -2099,16 +2099,18 @@
         
+ 
+ 
 (%3CRightM
@@ -2128,16 +2128,18 @@
 =%7Btab%7D%3E%0A
+  
         
@@ -2197,16 +2197,18 @@
 b %7D %7D%7D%3E%0A
+  
         
@@ -2243,16 +2243,18 @@
     
+  
 %3C/Link%3E%0A
     
@@ -2249,16 +2249,18 @@
 %3C/Link%3E%0A
+  
         
@@ -2299,11 +2299,41 @@
     
+ 
+ 
 )%7D%0A
+            %3C/RightSubMenu%3E%0A
     
@@ -2353,24 +2353,8 @@
 ay%3E%0A
-          %3Cbr /%3E
 %0A   

fix gateway error in collection