import React, { Component, Children } from 'react';
import PropTypes from 'prop-types';
import glamorous from 'glamorous';

import { TabBar, Tab } from '../addon_panel/index';

const MobilePanel = glamorous.div(
  ({ selected }) =>
    selected
      ? {
          display: 'block',
          position: 'fixed',
          top: 0,
          left: 0,
          height: 'calc(100vh - 40px)',
          width: '100vw',
          overflow: 'auto',
          WebkitOverflowScrolling: 'touch',
        }
      : {
          display: 'none',
        }
);

const MobileTabs = ['Navigator', 'Preview', 'Addons'];

export default class Layout extends Component {
  state = { index: 1 };
  render() {
    const { index } = this.state;
    const children = Children.toArray(this.props.children);

    return (
      <div>
        <div
          style={{
            position: 'fixed',
            bottom: 0,
            left: 0,
            width: '100vw',
            zIndex: 9999,
          }}
        >
          <TabBar>
            {children.map((item, i) => (
              <Tab
                key={MobileTabs[i]}
                name={i}
                selected={i === index}
                title={MobileTabs[i] || `${i}`}
                onSelect={() => this.setState({ index: i })}
              />
            ))}
          </TabBar>
        </div>
        {children.map((item, i) => <MobilePanel selected={i === index}>{item}</MobilePanel>)}
      </div>
    );
  }
}
Layout.propTypes = {
  children: PropTypes.node.isRequired,
};

@@ -1123,17 +1123,29 @@
   name=%7B
-i
+MobileTabs%5Bi%5D
 %7D%0A      
@@ -1388,16 +1388,28 @@
 m, i) =%3E
+ (%0A         
  %3CMobile
@@ -1413,16 +1413,36 @@
 ilePanel
+ key=%7BMobileTabs%5Bi%5D%7D
  selecte
@@ -1461,14 +1461,38 @@
 ex%7D%3E
-%7Bitem%7D
+%0A            %7Bitem%7D%0A          
 %3C/Mo
@@ -1501,16 +1501,26 @@
 lePanel%3E
+%0A        )
 )%7D%0A     

FIX proptype warning