import React from 'react'

import MobileSideDrawerOptions from '../../SideDrawer/MobileSideDrawerOptions/MobileSideDrawerOptions'
import { type RouteConfig } from '../RouterTabs/RouterTabs'

export type MobileTabsOptionsProps = {
  /** Array of the RouteConfig object. Needed to render the tab options for mobile. */
  mobileConfig: RouteConfig[]
  /** The option that is currently selected. */
  active: string
  /** Callout function to set the active option */
  setActive: (label: string) => void
  /** Pass in a navigate function (useHistory, useNavigate, or other functions) depending on the router the app is using. */
  navigate?: (link: string) => void
  /** We need the location pathname to determine the current page */
  currentPath?: string
  drawerCloseCallout?: (arg: boolean) => void
}

const MobileTabsOptions = ({
  mobileConfig,
  active,
  setActive,
  navigate,
  currentPath,
  drawerCloseCallout,
}: MobileTabsOptionsProps): React.JSX.Element => {
  const goToPage = (option: { label: string; link?: string }) => {
    setActive(option.label)
    option.link && navigate?.(option.link)
    drawerCloseCallout?.(false)
  }

  return (
    <MobileSideDrawerOptions
      options={mobileConfig}
      callout={goToPage}
      activeRow={active}
      currentPage={currentPath}
    />
  )
}

export default MobileTabsOptions