import { Switch, useParams } from 'react-router-dom'
import { memo, useMemo } from 'react'
import { Layout, Menu } from 'antd'
import { FilePdfOutlined } from '@ant-design/icons'

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

import DailyReport from './DailyReport'
import DiagramReport from './DiagramReport'

const { Content } = Layout

export const Reports = memo(({ idWell }) => {
    const { tab } = useParams()
    const rootPath = useMemo(() => `/well/${idWell}/reports`, [idWell])

    return (
        <Layout>
            <Menu mode={'horizontal'} selectable={true} selectedKeys={[tab]} className={'well_menu'}>
                <PrivateMenuItemLink root={rootPath} key={'diagram_report'} path={'diagram_report'} icon={<FilePdfOutlined />} title={'Диаграмма'}/>
                <PrivateMenuItemLink root={rootPath} key={'daily_report'} path={'daily_report'} title={'Суточный рапорт'} />
            </Menu>

            <Layout>
                <Content className={'site-layout-background'}>
                <Switch>
                    <PrivateRoute path={`${rootPath}/diagram_report`}>
                        <DiagramReport idWell={idWell} />
                    </PrivateRoute>
                    <PrivateRoute path={`${rootPath}/daily_report`}>
                        <DailyReport idWell={idWell} />
                    </PrivateRoute>
                    <PrivateDefaultRoute urls={[
                        `${rootPath}/diagram_report`,
                        `${rootPath}/daily_report`,
                    ]}/>
                </Switch>
                </Content>
            </Layout>
        </Layout>
    )
})

export default Reports