import { useContext, useMemo } from 'react'
import { Layout } from 'antd'
import { useMediaQuery } from 'react-responsive'
import { useLocation, useNavigate } from 'react-router-dom'
import { AuthContext } from '../context/AuthContext'
import { ElectronContext } from '../context/ElectronContext'
import {
  getSidebarDefaultPath,
  isSidebarSectionVisible
} from '../../../database/Sidebars'
import { getSidebarIconNode } from '../../Icons/sidebarIconMap'
import SegmentedNav from './SegmentedNav'

const { Footer } = Layout

const MobileFooterNavigation = () => {
  const isMobile = useMediaQuery({ maxWidth: 768 })
  const { userProfile, authenticated } = useContext(AuthContext)
  const { isElectron } = useContext(ElectronContext)
  const navigate = useNavigate()
  const location = useLocation()
  const includeDev = import.meta.env.DEV

  const sectionItems = useMemo(
    () =>
      [
        {
          key: 'production',
          label: 'Production',
          iconKey: 'production'
        },
        {
          key: 'inventory',
          label: 'Inventory',
          iconKey: 'inventory'
        },
        {
          key: 'sales',
          label: 'Sales',
          iconKey: 'sales'
        },
        {
          key: 'finance',
          label: 'Finance',
          iconKey: 'finance'
        },
        {
          key: 'management',
          label: 'Management',
          iconKey: 'settings'
        }
      ].filter((item) =>
        isSidebarSectionVisible(item.key, { includeDev, userProfile })
      ),
    [includeDev, userProfile]
  )

  const selectedKey = useMemo(() => {
    const pathParts = location.pathname.split('/').filter(Boolean)
    const sectionKey = pathParts[1]
    return (
      sectionItems.find((item) => item.key === sectionKey)?.key ||
      sectionItems[0]?.key
    )
  }, [location.pathname, sectionItems])

  const options = useMemo(
    () =>
      sectionItems.map((item) => ({
        value: item.key,
        label: item.label,
        icon: getSidebarIconNode(item.iconKey)
      })),
    [sectionItems]
  )

  const showControls = !isElectron || authenticated

  if (!isMobile || !showControls || options.length === 0) {
    return null
  }

  return (
    <Footer className='mobile-footer-navigation ant-menu-light'>
      <SegmentedNav
        className='mobile-footer-navigation-tabs'
        value={selectedKey}
        options={options}
        animated
        onChange={(key) =>
          navigate(getSidebarDefaultPath(key, { includeDev, userProfile }))
        }
      />
    </Footer>
  )
}

export default MobileFooterNavigation