import { Layout, Menu, Breadcrumb, Row, Col, Avatar  } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined, createFromIconfontCN  } from '@ant-design/icons';
import '../App.css';
import 'antd/dist/antd.min.css';
import {Router, Route, Link, Redirect, Switch} from 'react-router-dom';
import { actionRootCats } from "../action";


import {SignIn, ListOrders, Page404} from '../components';
import { CCategoryList, SwitchRoute } from '../components';
import { useEffect } from 'react';
import CPageCategory from './cpageCategory';
import CreatePageGood from './pageGood';
import { HeaderSite } from '../components';
import PageBasket from './pageBasket';
import { RegisterIn } from '../components';
import { UseRoute } from '../route'


const { SubMenu } = Menu;
const { Header, Content, Footer, Sider } = Layout;
const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
});

function MainPage () {

  return (
    <>
     <Layout>
      <HeaderSite/>
    <Content style={{ padding: '0 50px' }}>
      <Layout className="site-layout-background" style={{ padding: '24px 0' }}>
        <Sider className="site-layout-background" width={200}>
          {/* <Menu
            mode="inline"
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            style={{ height: '100%' }}
          /> */}
            <CCategoryList/>
            {/* <SubMenu key="sub1" icon={<UserOutlined />} title="subnav 1"> */}
              {/* <Menu.Item key="1">option1</Menu.Item>
              <Menu.Item key="2">option2</Menu.Item>
              <Menu.Item key="3">option3</Menu.Item>
              <Menu.Item key="4">option4</Menu.Item> */}
            {/* </SubMenu>
            <SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
              <Menu.Item key="5">option5</Menu.Item>
              <Menu.Item key="6">option6</Menu.Item>
              <Menu.Item key="7">option7</Menu.Item>
              <Menu.Item key="8">option8</Menu.Item>
            </SubMenu>
            <SubMenu key="sub3" icon={<NotificationOutlined />} title="subnav 3">
              <Menu.Item key="9">option9</Menu.Item>
              <Menu.Item key="10">option10</Menu.Item>
              <Menu.Item key="11">option11</Menu.Item>
              <Menu.Item key="12">option12</Menu.Item>
            </SubMenu> */}
          {/* </Menu> */}
        </Sider>
        <Content style={{ padding: '0 24px', minHeight: 280 }}>Content
          <Switch>
            <SwitchRoute/>
          </Switch>

          


        </Content>
      </Layout>
    </Content>
    <Footer style={{ textAlign: 'center' }}><div className="icons-list">
      <IconFont type="icon-facebook"  style={{color: 'black', fontSize:'30px'}}/>
      <IconFont type="icon-twitter" style={{fontSize:'30px', marginLeft:'10px'}} />
    </div>
    </Footer>
    </Layout> 
    </>
  )
  
}

export default MainPage;