import { Layout, Menu,  } from 'antd' // Button,
import { FundViewOutlined, FolderOutlined } from '@ant-design/icons' // UserOutlined, MenuOutlined,
import { useState } from 'react'
import { Switch, Route, Redirect, Link} from "react-router-dom"
import Wells from './Wells'
import TelemetryView from './TelemetryView'
import Files from './Files'
import Archive from './Archive'
import Messages from './Messages'
import Report from './Report'
import Analysis from './Analysis'
import PageHeader from './Header'

const { Content, Sider } = Layout

export default function Main(){
  const [sidebarVisible] = useState(true)  // setSidebarVisible
  // const login = localStorage['login']

  // let handleLogout = () => {
  //   localStorage.removeItem('login')
  //   localStorage.removeItem('token')
  // }

  return(
    <Layout>
      <PageHeader />
      <Layout>
        {sidebarVisible &&
        <Sider width={200} className="site-layout-background">
          <Menu
            mode="inline"
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            style={{ height: '100%', borderRight: 0 }}
          >
            <Menu.Item key="1" icon= {<FundViewOutlined />}>
              <Link to="/well">Мониторинг</Link>
            </Menu.Item>            
            <Menu.Item key="2" icon= {<FolderOutlined />}>
              <Link to="/archive">Архив</Link>
            </Menu.Item>
            <Menu.Item key="3" icon= {<FolderOutlined />}>
              <Link to="/messages">Сообщения</Link>
            </Menu.Item>
            <Menu.Item key="4" icon= {<FolderOutlined />}>
              <Link to="/report">Рапорт</Link>
            </Menu.Item>
            <Menu.Item key="5" icon= {<FolderOutlined />}>
              <Link to="/analysis">Анализ</Link>
            </Menu.Item>
            <Menu.Item key="6" icon= {<FolderOutlined />}>
              <Link to="/file">Файлы</Link>
            </Menu.Item>
          </Menu>
        </Sider>
        }
        
        <Layout>
          <Content className="site-layout-background sheet">
            <Switch>
              <Route path="/file">
                <Files />
              </Route>
              <Route path="/archive">
                <Archive />
              </Route>
              <Route path="/well/:id/messages">
                <Messages />
              </Route>
              <Route path="/report">
                <Report />
              </Route>
              <Route path="/analysis">
                <Analysis />
              </Route>
              <Route path="/well/:id">
                <TelemetryView/>
              </Route>
              <Route path="/well">
                <Wells />
              </Route>
              <Route path="/">
                <Redirect to={{pathname: "/well"}}/>
              </Route>
            </Switch>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
}