import React from 'react';
import { Layout, Menu, Breadcrumb, Icon, Button, Row, Col } from 'antd';
import { Input } from 'antd';
import NamespaceSelect from './namespaceSelect';

const { TextArea } = Input;
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

class SiderConfig extends React.Component {
  state = {
    collapsed: false,
  };

  onCollapse = collapsed => {
    console.log(collapsed);
    this.setState({ collapsed });
  };
  
  render() {
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Sider  collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
          <div className="logo" />
          <Menu theme="dark" defaultOpenKeys={['namespace']} defaultSelectedKeys={['namespace']} mode="inline"  >

            <SubMenu 
            collapsed="true"
            key="namespace"
            title={
              <span>
                <Icon type="team" />
                Namespace
              </span>
            }>
              <NamespaceSelect>

              </NamespaceSelect>
            </SubMenu>


          </Menu>
        </Sider>
        <Layout>
          <Header style={{ background: '#fff', padding: 0, }}>
            
          <Row type="flex" justify="end">
              <Col span={4}><Button type="primary" style={{width: '100px',}}>退出</Button></Col>
          </Row>
            
          </Header >
          <Content style={{ margin: '0 16px' }}>
            <Breadcrumb style={{ margin: '8px 0' }}>
              <Breadcrumb.Item>User</Breadcrumb.Item>
              <Breadcrumb.Item>Bill</Breadcrumb.Item>
            </Breadcrumb>
            <TextArea style={{ minHeight: '100%' }}>

            </TextArea>
          </Content>
          <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
        </Layout>
      </Layout>
    );
  }
}

export default SiderConfig;