import {Box} from '@chakra-ui/react'
import {ThemeProvider} from '../chakra-providers'
import {DiscardButton, EditButton} from '../internal-plugins/pages/ui/toolbar'
import {useAppSelector, withRedux} from '../redux'
import {useIncomingBuildChecker} from '../services/IncomingBuildChecker'
import {PublishButton} from '../ui/toolbar'
import {useNavigate} from '../utils/hooks/useNavigate'
import {AccountSwitcher} from './AccountSwitcher'
import {AdminToolbar} from './components/AdminToolbar'
import {IncomingBuildBanner} from './components/IncomingBuildBanner'
import JaenActivationButton from './components/JaenActivationButton'
import {SaveButton} from './toolbar/SaveButton'
import {ToolbarChangesElement} from './ToolbarChangesElement'

const logoText = 'Jaen Admin'
const toolbarItems = {
  left: [
    <EditButton />,
    <DiscardButton />,
    <SaveButton />,
    <PublishButton />,
    <ToolbarChangesElement />
  ],
  right: [<AccountSwitcher />]
}

const AdminToolbarContainer = withRedux(() => {
  const isAuthenticated = useAppSelector(state => state.auth.isAuthenticated)
  const {isIncomingBuild, onOpenAlert} = useIncomingBuildChecker()

  const navigate = useNavigate()

  const handleJaenActivation = () => {
    if (isAuthenticated) {
      navigate('/admin/')
    } else {
      navigate('/admin/login')
    }
  }

  return (
    <ThemeProvider>
      {isIncomingBuild && <IncomingBuildBanner onUpdateClick={onOpenAlert} />}
      {isAuthenticated ? (
        <Box pos="sticky" top="0" zIndex={'banner'}>
          <AdminToolbar logoText={logoText} toolbarItems={toolbarItems} />
        </Box>
      ) : (
        <JaenActivationButton onClick={handleJaenActivation} />
      )}
    </ThemeProvider>
  )
})

export default AdminToolbarContainer