import { Box } from '@tidbcloud/uikit'
import { IconLifeBuoy02 } from '@tidbcloud/uikit/icons'
import { observer } from 'mobx-react'

import { NotificationCard } from 'dbaas/screens/Notification'
import { SupportHome } from 'dbaas/screens/OrgSettings/features/Support'
import useStores from 'dbaas/stores/useStores'

import { NavButton } from '../components'

import { UserNav } from './UserNav'

interface FootSectionProps {
  opened?: boolean
  close?: () => void
}

export const FootSection = observer(({ close }: FootSectionProps) => {
  const {
    store: { supportVisible },
    actions: { toggleSupportVisible }
  } = useStores()

  return (
    <>
      <Box mx="-md">
        <Box
          sx={{ ':hover': { textDecoration: 'none !important' } }}
          data-mp-event="Support nav clicked"
          onClick={toggleSupportVisible}
        >
          <NavButton icon={<IconLifeBuoy02 size={16} />}>Support</NavButton>
        </Box>
        <NotificationCard />
        <UserNav onMenuChange={close} />
      </Box>
      <SupportHome opened={supportVisible} onClose={toggleSupportVisible} />
    </>
  )
})