import { memo } from 'react'
import {
  FolderOutlined,
  FundViewOutlined,
  AlertOutlined,
  FilePdfOutlined,
  DatabaseOutlined,
  ExperimentOutlined,
  FundProjectionScreenOutlined,
} from '@ant-design/icons'
import { Layout, Menu } from 'antd'
import { Switch, useParams } from 'react-router-dom'

import { PrivateRoute, PrivateDefaultRoute, PrivateMenuItem } from '@components/Private'

import Report from './Report'
import Archive from './Archive'
import Measure from './Measure'
import Messages from './Messages'
import Documents from './Documents'
import TelemetryView from './TelemetryView'
import WellOperations from './WellOperations'
import DrillingProgram from './DrillingProgram'
import TelemetryAnalysis from './TelemetryAnalysis'

const { Content } = Layout

export const Well = memo(() => {
  const { idWell, tab } = useParams()
  const rootPath = `/well/${idWell}`

  return (
    <Layout>
      <Menu mode={'horizontal'} selectable={true} selectedKeys={[tab]} className={'well_menu'}>
        <PrivateMenuItem.Link root={rootPath} key={'telemetry'} path={'telemetry'} icon={<FundViewOutlined />} title={'Мониторинг'}/>
        <PrivateMenuItem.Link root={rootPath} key={'message'} path={'message'} icon={<AlertOutlined/>} title={'Сообщения'} />
        <PrivateMenuItem.Link root={rootPath} key={'report'} path={'report'} icon={<FilePdfOutlined />} title={'Рапорт'} />
        <PrivateMenuItem.Link root={rootPath} key={'operations'} path={'operations'} icon={<FolderOutlined />} title={'Операции по скважине'} />
        <PrivateMenuItem.Link root={rootPath} key={'archive'} path={'archive'} icon={<DatabaseOutlined />} title={'Архив'} />
        <PrivateMenuItem.Link root={rootPath} key={'telemetryAnalysis'} path={'telemetryAnalysis'} icon={<FundProjectionScreenOutlined />} title={'Операции по телеметрии'} />
        <PrivateMenuItem.Link root={rootPath} key={'document'} path={'document'} icon={<FolderOutlined />} title={'Документы'} />
        <PrivateMenuItem.Link root={rootPath} key={'measure'} path={'measure'} icon={<ExperimentOutlined />} title={'Измерения'} />
        <PrivateMenuItem.Link root={rootPath} key={'drillingProgram'} path={'drillingProgram'} icon={<FolderOutlined />} title={'Программа бурения'} />
      </Menu>

      <Layout>
        <Content className={'site-layout-background'}>
          <Switch>
            <PrivateRoute path={`${rootPath}/telemetry`}>
              <TelemetryView idWell={idWell} />
            </PrivateRoute>
            <PrivateRoute path={`${rootPath}/message`}>
              <Messages idWell={idWell} />
            </PrivateRoute>
            <PrivateRoute path={`${rootPath}/report`}>
              <Report idWell={idWell} />
            </PrivateRoute>
            <PrivateRoute path={`${rootPath}/operations/:tab?`}>
              <WellOperations idWell={idWell} />
            </PrivateRoute>
            <PrivateRoute path={`${rootPath}/archive`}>
              <Archive idWell={idWell} />
            </PrivateRoute>
            <PrivateRoute path={`${rootPath}/telemetryAnalysis/:tab?`}>
              <TelemetryAnalysis idWell={idWell} />
            </PrivateRoute>
            <PrivateRoute path={`${rootPath}/document/:category?`}>
              <Documents idWell={idWell} />
            </PrivateRoute>
            <PrivateRoute path={`${rootPath}/measure`}>
              <Measure idWell={idWell}/>
            </PrivateRoute>
            <PrivateRoute path={`${rootPath}/drillingProgram`}>
              <DrillingProgram idWell={idWell}/>
            </PrivateRoute>
            <PrivateDefaultRoute urls={[
              `${rootPath}/telemetry`,
              `${rootPath}/message`,
              `${rootPath}/report`,
              `${rootPath}/operations`,
              `${rootPath}/archive`,
              `${rootPath}/telemetryAnalysis`,
              `${rootPath}/document`,
              `${rootPath}/measure`,
              `${rootPath}/drillingProgram`,
            ]}/>
          </Switch>
        </Content>
      </Layout>
    </Layout>
  )
})

export default Well