import BottomNavigationAction from '@mui/material/BottomNavigationAction'
import BottomNavigation from '@mui/material/BottomNavigation'
import React from 'react'
import { LmComponentRender } from '@LmComponentRender'
import { LmCoreComponents } from '@CONFIG'
import { useStylesAdvanced } from '../../utils/hooks/useStylesAdvanced'
import {
  LmBottomNavigationItemProps,
  LmBottomNavigationProps
} from './bottomNavigationTypes'
import { getLinkAttrs, isValidLink, LinkType } from '../../utils/linkHandler'
import { useTheme } from '@mui/material/styles'
import clsx from 'clsx'

export default function LmBottomNavigation({
  content
}: LmBottomNavigationProps) {
  const theme = useTheme()
  const classesAdvanced = useStylesAdvanced({
    props: content.styles,
    propsMobile: content.styles_mobile,
    propsTablet: content.styles_tablet,
    propsHover: content.styles_hover
  }).classes
  const bodyElements: LmBottomNavigationItemProps[] = content.body || []
  return (
    <BottomNavigation
      showLabels
      sx={{
        ...(content.stick_to_bottom && {
          width: '100%',
          position: 'fixed',
          bottom: 0,
          zIndex: theme.zIndex.snackbar
        })
      }}
      classes={{
        root: clsx({
          [classesAdvanced.advanced]: !!content.styles?.length,
          [classesAdvanced.advancedMobile]: !!content.styles_mobile?.length,
          [classesAdvanced.advancedTablet]: !!content.styles_tablet?.length,
          [classesAdvanced.advancedHover]: !!content.styles_hover?.length
        })
      }}
    >
      {bodyElements.map((item) => {
        const btnProps: any = isValidLink(item.link as LinkType)
          ? {
              ...getLinkAttrs(item.link as LinkType, {
                openExternal: !!item.open_external
              }),
              naked: true,
              component: LmCoreComponents.lm_link_render
            }
          : {}
        return (
          <BottomNavigationAction
            key={item._uid}
            {...btnProps}
            label={
              Array.isArray(item.label) && item.label[0] ? (
                <LmComponentRender content={item.label[0]} />
              ) : undefined
            }
            icon={
              Array.isArray(item.icon) && item.icon[0] ? (
                <LmComponentRender content={item.icon[0]} />
              ) : undefined
            }
            showLabel={item.content?.show_label}
          />
        )
      })}
    </BottomNavigation>
  )
}