import { Layout, Menu, Button, } from 'antd'
import { UserOutlined, MenuOutlined, FundViewOutlined, FolderOutlined } from '@ant-design/icons'
import logo from '../images/logo_32.png'
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'

const { Header, Content, Sider } = Layout

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

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

  return(
    <Layout>
      <Header className="header">        
        <Button icon={<MenuOutlined />} onClick={()=>setSidebarVisible(!sidebarVisible)}/>
        <img src={logo} alt="АСБ" className="logo"/> 
        <h1 className="title">Мониторинг</h1>
        <Link to="/login" onClick={handleLogout}>
          <Button icon={<UserOutlined/>}>            
            ({login}) Выход
          </Button>
        </Link>
      </Header>
      <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="/file">Архив</Link>
            </Menu.Item>
            <Menu.Item key="3" icon= {<FolderOutlined />}>
              <Link to="/file">Сообщения</Link>
            </Menu.Item>
            <Menu.Item key="4" icon= {<FolderOutlined />}>
              <Link to="/file">Рапорт</Link>
            </Menu.Item>
            <Menu.Item key="5" icon= {<FolderOutlined />}>
              <Link to="/file">Анализ</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="/well/:id">
                <TelemetryView/>
              </Route>
              <Route path="/well">
                <Wells />
              </Route>
              <Route path="/">
                <Redirect to={{pathname: "/well"}}/>
              </Route>
            </Switch>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
}