/**
* @title vertical-layout
*/

import React, { useState } from 'react'
import { FakeBrowserWithWrapper as FakeBrowser } from '@alicloud/console-components-fake-browser'
import Page from '@b-design/ui-page'
import { VerticalLayout } from '../src/index';
import { Switch, Route, BrowserRouter as Router } from 'react-router-dom';
import { Breadcrumb, Card, Table, Search, Icon } from '@b-design/ui'

const items = [
  { key: '/home', to: '/home', label: '首页', icon: 'Home-outlined', },
  { key: '/instance', to: '/instance', label: '实例概览', icon: 'Home-outlined', },
  {
    key: '/logs',
    label: '日志',
    icon: 'Home-outlined',
    items: [
      { key: '/pre', to: '/pre', label: '预发环境' },
      { key: '/prod', to: '/prod', label: '生产环境' },
    ],
  },
]

const breadcrumb = (
  <Breadcrumb>
    <Breadcrumb.Item>首页</Breadcrumb.Item>
    <Breadcrumb.Item>列表</Breadcrumb.Item>
  </Breadcrumb>
)

const Demo = (props) => {
  return (
    <Card contentHeight='auto'>
      <Table>
        <Table.Column title='列标题' />
        <Table.Column title='列标题' />
        <Table.Column title='列标题' />
        <Table.Column title='列标题' />
        <Table.Column title='列标题' />
      </Table>
    </Card>
  )
}

const Layout = (props) => {
  function renderLeftContainer() {
    return (
      <div>
        ProductName
      </div>
    )
  }

  function renderRightContainer() {
    return (
      <div>
        <Search 
          size='small' 
          type='brand'
          style={{width: '175px'}}
        />
        <Icon type="email" style={{margin: '0px 30px'}} />
        <Icon type="set" />
      </div>
    )
  }
  return (
    <VerticalLayout 
      breadcrumb={breadcrumb} 
      menus={items}
      headerLeftNode={renderLeftContainer()}
      headerRightNode={renderRightContainer()}
      pageTitle='页面标题'
      onBackArrowClick={() => {
        window.history.back()
      }}
      style={{ height: 500 }}
    >
      {props.children}
    </VerticalLayout>
  )
}

const Example: React.FC<{}> = () => {

  return (
    <FakeBrowser>
      <Router>
        <Layout>
          <Switch>
            <Route path='/home' exact component={Demo} />
            <Route path='/instance' exact component={Demo} />
            <Route path='/pre' exact component={Demo} />
          </Switch>
        </Layout>
      </Router>
    </FakeBrowser>
  )
}

export default Example