/**
* @title both-layout
*/

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

const NAVS = [
  { 
    key: '/home',
    to: '/home', 
    label: '首页',
    items: [
      {
        label: '示例',
        to: '/home/demo',
        icon: 'Home-outlined',
        key: 'home/demo1'
      },
      {
        label: '示例',
        to: '/home/demo2',
        key: 'home/demo2',
        icon: 'Home-outlined', 
      }
    ]
  },
  { key: '/instance', to: '/instance', label: '实例概览' },
  {
    key: '/logs',
    label: '日志',
    items: [
      { 
        key: '/pre', 
        to: '/pre', 
        label: '预发环境', 
        icon: 'Home-outlined', 
        items: [
          {
            label: '示例',
            key: '/demo/1',
            to: '/demo/1',
          },
        ]
      },
      { 
        key: '/prod', 
        to: '/prod', 
        label: '生产环境', 
        icon: 'Home-outlined', 
        items: [
          {
            label: '示例',
            key: '/demo/2',
            to: '/demo/2',
          },
          {
            label: '示例',
            key: '/demo/3',
            to: '/demo/3',
          },
          {
            label: '示例',
            key: '/demo/4',
            to: '/demo/4',
          },
          { 
            key: '/tiaozhaun12', 
            label: '跳转', 
            href: 'https://www.aliyun.com',
            linkProps: {
              target: '_blank'
            }
          },
        ]
      },
    ],
  },
  { 
    key: '/tiaozhaun', 
    label: '跳转', 
    href: 'https://www.aliyun.com',
    linkProps: {
      target: '_blank'
    }
  },
]

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 (
    <BothSidesLayout
      menus={NAVS}
      headerLeftNode={renderLeftContainer()}
      headerRightNode={renderRightContainer()}
      pageTitle='页面标题'
      onBackArrowClick={() => {
        window.history.back()
      }}
      breadcrumb={breadcrumb}
      style={{height: 500}}
    >
      {props.children}
    </BothSidesLayout>
  )
}

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} />
            <Route path='/demo/1' exact component={Demo} />
            <Route path='/prod' exact component={Demo} />
            <Route path='/demo/2' exact component={Demo} />
            <Route path='/demo/3' exact component={Demo} />
            <Route path='/demo/4' exact component={Demo} />
          </Switch>
        </Layout>
      </Router>
    </FakeBrowser>
  )
}

export default Example