import { Box, Typography } from '@mui/material'
import { ReactNode } from 'react'
import { isDevelopment } from '../../../constants/isDevelopment'
import AppsMenu from './AppsMenu'
import { applications } from './applications'
import {
  collegex,
  commutex,
  enrollx,
  examx,
  hostelx,
  payx,
  peoplex,
} from './assets'

import { campxLogoPrimary } from '../../../assets/images'
import HeaderActions from './HeaderActions/HeaderActions'
import {
  StyledHeader,
  StyledImageWrapper,
  StyledLogosWrapper,
  StyledRouterLink,
} from './styles'

const imageMap = {
  ums: collegex,
  enroll: enrollx,
  exams: examx,
  payments: payx,
  people: peoplex,
  campx: collegex,
  commute: commutex,
  hostel: hostelx,
  admin: campxLogoPrimary,
}

interface AppHeaderProps {
  clientLogo: string
  fullName: string
  profileUrl?: string
  showMenu?: boolean
  actions?: ReactNode[]
  userBoxActions: {
    label: ReactNode
    icon?: ReactNode
    onClick: any
  }[]
  customHeaderActions?: ReactNode
  headerSx?: any
  imageSx?: any
  profileSx?: any
  cogWheelMenu?: { label: string; path: string; openNewTab?: boolean }[]
}

export default function AppHeader({
  clientLogo = imageMap.campx,
  showMenu = true,
  fullName,
  userBoxActions = [],
  cogWheelMenu = [],
  customHeaderActions,
  profileUrl,
  actions = [],
  headerSx = {},
  profileSx = {},
  imageSx = {},
}: AppHeaderProps) {
  return (
    <StyledHeader sx={headerSx}>
      <Box sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
        {showMenu && <AppsMenu />}
        <AppLogo clientLogo={clientLogo} imageSx={imageSx} />
      </Box>
      <Box className="actions">
        {customHeaderActions ? (
          customHeaderActions
        ) : (
          <HeaderActions
            cogWheelMenu={cogWheelMenu}
            fullName={fullName}
            userBoxActions={userBoxActions}
            profileUrl={profileUrl}
            actions={actions}
            profileSx={profileSx}
          />
        )}
      </Box>
    </StyledHeader>
  )
}

const AppLogo = ({ clientLogo, imageSx }) => {
  const originSubdomain = window.location.host.split('.')?.slice(-3)[0] ?? 'ums'
  const currentApp =
    applications.find((item) => item.domainName === originSubdomain)
      ?.domainName ?? 'admin'

  return (
    <StyledRouterLink to={'/'}>
      <StyledLogosWrapper>
        <StyledImageWrapper sx={imageSx}>
          <img src={imageMap[currentApp]} />
        </StyledImageWrapper>
        <Box
          sx={{
            height: '26px',
            width: '2px',
            background: 'gray',
          }}
        ></Box>
        <StyledImageWrapper>
          {isDevelopment ? (
            <Typography variant="h1">Developer</Typography>
          ) : (
            <img
              src={clientLogo}
              onError={(e: any) => {
                e.target.src = imageMap.campx
              }}
            />
          )}
        </StyledImageWrapper>
      </StyledLogosWrapper>
    </StyledRouterLink>
  )
}
