import { lazy } from 'react'
import { Navigate, Route, useLocation } from 'react-router-dom'

const TaxRecordsInfoRedirect = () => {
  const location = useLocation()
  return (
    <Navigate
      to={`/dashboard/finance/taxrecords/info${location.search}`}
      replace
    />
  )
}

const Invoices = lazy(
  () => import('../components/Dashboard/Finance/Invoices.jsx')
)
const Payments = lazy(
  () => import('../components/Dashboard/Finance/Payments.jsx')
)
const FinanceOverview = lazy(
  () => import('../components/Dashboard/Finance/FinanceOverview.jsx')
)
const TaxRecords = lazy(
  () => import('../components/Dashboard/Finance/TaxRecords.jsx')
)

const FinanceRoutes = [
  <Route
    key='overview'
    path='finance/overview'
    element={<FinanceOverview />}
  />,
  <Route key='invoices' path='finance/invoices' element={<Invoices />} />,
  <Route key='payments' path='finance/payments' element={<Payments />} />,
  <Route key='taxrecords' path='finance/taxrecords' element={<TaxRecords />} />,
  <Route
    key='taxrecords-redirect'
    path='management/taxrecords'
    element={<Navigate to='/dashboard/finance/taxrecords' replace />}
  />,
  <Route
    key='taxrecords-info-redirect'
    path='management/taxrecords/info'
    element={<TaxRecordsInfoRedirect />}
  />
]

export default FinanceRoutes