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

import { RootPathContext } from '@asb/context'
import { PrivateMenu, PrivateSwitch } from '@components/Private'

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

const { Content } = Layout

export const Reports = memo(() => {
    const { tab } = useParams()

    const root = useContext(RootPathContext)
    const rootPath = useMemo(() => `${root}/reports`, [root])

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

                <Layout>
                    <Content className={'site-layout-background'}>
                    <PrivateSwitch elseRedirect={['diagram_report', 'daily_report']}>
                        <DiagramReport key={'diagram_report'} />
                        <DailyReport key={'daily_report'} />
                    </PrivateSwitch>
                    </Content>
                </Layout>
            </Layout>
        </RootPathContext.Provider>
    )
})

export default Reports