import AppsOutageIcon from '@mui/icons-material/AppsOutage'
import { Box, Menu, Typography, styled } from '@mui/material'
import { useState } from 'react'
import { campxTenantKey, instituitionKey } from '../../../contexts/Providers'
import { PermissionsStore } from '../../../shared-state'
import { applications } from './applications'
import { AppsIcon } from './icons'
import {
  StyledDescription,
  StyledIconButton,
  StyledImageBox,
  StyledLink,
  StyledMenuItem,
  StyledMenuItemContainer,
} from './styles'

const AppsMenu = () => {
  const permissionState = PermissionsStore.useState((s) => s)
  const [anchorEl, setAnchorEl] = useState<any>(null)
  const open = Boolean(anchorEl)
  const applicationList = applications?.filter((item) =>
    permissionState.applications.includes(item.key),
  )

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget)
  }

  const handleClose = () => {
    setAnchorEl(null)
  }

  return (
    <>
      <StyledIconButton onClick={handleClick}>
        <AppsIcon />
      </StyledIconButton>

      <Menu
        transitionDuration={150}
        elevation={2}
        id="basic-menu"
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'left',
        }}
        TransitionProps={{
          unmountOnExit: false,
        }}
        sx={{
          '& .MuiPaper-root': {
            left: '0 !important',
            top: '64px !important',
            '&>:last-child': {
              paddingBottom: '0px',
            },
          },
        }}
      >
        {applicationList.length != 0 ? (
          <>
            <Box sx={{ padding: '0.3rem 1rem' }}>
              <Typography variant="body2">Switch to</Typography>
            </Box>
            <Box>
              {applicationList.map((item, index) => {
                return (
                  <StyledLink
                    href={item.path + `/${campxTenantKey}/${instituitionKey}`}
                    key={index}
                  >
                    <StyledMenuItemContainer
                      key={index}
                      onClick={() => {
                        window.location.href = item.path
                        handleClose()
                      }}
                    >
                      <MenuItem data={item} />
                    </StyledMenuItemContainer>
                  </StyledLink>
                )
              })}
            </Box>
          </>
        ) : (
          <StyledNoAppContainer>
            <AppsOutageIcon sx={{ width: '40px', height: '40px' }} />
            <Typography variant="subtitle1">
              No Application have been assigned
            </Typography>
          </StyledNoAppContainer>
        )}
      </Menu>
    </>
  )
}

export default AppsMenu

const MenuItem = ({ data }) => {
  return (
    <StyledMenuItem>
      <StyledImageBox>
        <img src={data.icon} style={{ width: '20px', height: '20px' }} />
      </StyledImageBox>
      <Box>
        <Typography variant="h1" sx={{ marginBottom: '7px' }}>
          {data?.title}
        </Typography>
        <StyledDescription>{data?.description}</StyledDescription>
      </Box>
    </StyledMenuItem>
  )
}

const StyledNoAppContainer = styled(Box)({
  width: '300px',
  height: '300px',
  display: 'flex',
  alignItems: 'center',
  flexDirection: 'column',
  justifyContent: 'center',
  gap: '10px',
})
