/**
* @title basic
*/

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

const items = [
  {
    key: '/home',
    label: '首页',
    to: '/home'
  },
  {
    key: '/demo',
    label: '例子',
    items: [
      {
        key: '/demo/item1',
        to: '/demo/item1',
        label: '子节点1',
      },
      {
        key: '/demo/item2',
        to: '/demo/item2',
        label: '子节点2',
      }
    ]
  }
]

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) => {

  useEffect(() => {
    console.log(location.pathname, '223344')
  }, [location.pathname])

  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 (
    <HozLayout 
      breadcrumb={breadcrumb} 
      menus={items}
      headerLeftNode={renderLeftContainer()}
      headerRightNode={renderRightContainer()}
      pageTitle='页面标题'
      onBackArrowClick={() => {
        window.history.back()
      }}
      menuProps={{
        embeddable: true,
      }}
    >
      {props.children}
    </HozLayout>
  )
}

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

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

export default Example