import * as React from 'react';
import { styled, Theme, CSSObject } from '@mui/material/styles';
import MuiDrawer from '@mui/material/Drawer';
import List from '@mui/material/List';
import Box from '@mui/material/Box';
import Divider from '@mui/material/Divider';
import Alert from '@mui/material/Alert';
import Typography from '@mui/material/Typography';
import Avatar from '@mui/material/Avatar';

import { CategorizedMenu, KOSMenuProps, MenuItem } from './KOSMenuProps';
import KOSMenuElement from './KOSMenuElement';
import KOSMenuModuleName from './KOSMenuModuleName';
import KOSMenuSkeleton from './KOSMenuSkeleton';

const drawerWidth = 280;

const openedMixin = (theme: Theme): CSSObject => ({
  width: drawerWidth,
  transition: theme.transitions.create('width', {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.enteringScreen,
  }),
  overflowX: 'hidden',
});

const closedMixin = (theme: Theme): CSSObject => ({
  transition: theme.transitions.create('width', {
    easing: theme.transitions.easing.sharp,
    duration: 0,
  }),
  overflowX: 'hidden',
  width: `${theme.spacing(0)}`,
  paddingLeft: 0,
  paddingRight: 0,

  [theme.breakpoints.up('lg')]: {
    width: `calc(${theme.spacing(10)} + 1px)`,
    paddingLeft: '2px',
    paddingRight: '2px',
  },
});

const Drawer = styled(MuiDrawer, {
  shouldForwardProp: prop => prop !== 'open',
})(({ theme, open }) => ({
  width: drawerWidth,
  flexShrink: 0,
  whiteSpace: 'nowrap',
  boxSizing: 'border-box',

  ...(open && {
    ...openedMixin(theme),
    '& .MuiDrawer-paper': {
      ...openedMixin(theme),
      paddingTop: theme.mixins.toolbar.height,
      paddingLeft: '12px',
      paddingRight: '12px',
      border: 0,
    },
    '& .user-info': {
      opacity: 1,
    },
  }),
  ...(!open && {
    ...closedMixin(theme),
    '& .MuiDrawer-paper': {
      ...closedMixin(theme),
      paddingTop: theme.mixins.toolbar.height,
      border: 0,
    },
    '& .user-info': {
      opacity: 0,
    },
  }),
}));

const KOSMenu = (props: KOSMenuProps) => {
  const {
    user,
    drawerOpen,
    items,
    loading,
    error,
    onBackAction,
    onClickMenuItem,
    homeUrl,
    isBackButtonEnable,
    sx = {},
  } = props;

  const homePath = homeUrl ?? '/';

  const [
    categorizedMenu,
    setCategorizedMenu,
  ] = React.useState<CategorizedMenu | null>(null);

  React.useEffect(() => {
    if (items) {
      const newCategorizedUserMenu: CategorizedMenu = {
        'kitchen-display': [],
        'kitchen-staff': [],
        'kitchen-monitor': [],
      };

      items.forEach((userMenuElement: MenuItem) => {
        if (!newCategorizedUserMenu[userMenuElement.module]) {
          newCategorizedUserMenu[userMenuElement.module] = [];
        }

        newCategorizedUserMenu[userMenuElement.module].push(userMenuElement);
      });

      setCategorizedMenu(newCategorizedUserMenu);
    }
  }, [items]);

  return (
    <Drawer variant="permanent" open={drawerOpen} sx={sx}>
      {drawerOpen && user && (
        <Box
          className="user-info"
          display="flex"
          px={1.5}
          pt={4}
          pb={2}
          gap={2}
          alignItems="center"
        >
          {user.profileImage && (
            <Avatar
              src={user.profileImage}
              alt={user.profile?.firstName.charAt(0)}
              sx={{ width: 40, height: 40 }}
            />
          )}
          <Box>
            {user.profile?.firstName && (
              <Typography variant="h6">{user.profile?.firstName}</Typography>
            )}
            {user.profile?.lastName && (
              <Typography variant="h6">{user.profile?.lastName}</Typography>
            )}
            {user.rolName && (
              <Typography variant="body2">{user.rolName}</Typography>
            )}
            {user.profile?.position && (
              <Typography variant="body2">{user.profile?.position}</Typography>
            )}
          </Box>
        </Box>
      )}

      <List sx={{ pt: 1, pb: 0 }}>
        {onBackAction && (
          <KOSMenuElement
            onClick={onBackAction}
            drawerOpen={drawerOpen}
            icon="chevron_left"
            label="Volver"
            disabled={!isBackButtonEnable}
          />
        )}

        <KOSMenuElement
          drawerOpen={drawerOpen}
          to={homePath}
          icon="home_black"
          label="Inicio"
          selected={location.pathname === homePath}
          onClick={onClickMenuItem}
        />
      </List>

      <List sx={{ py: 0 }}>
        {loading && (
          <>
            <Divider />
            <KOSMenuSkeleton />
          </>
        )}

        {error && <Alert severity="error" />}

        {!loading &&
          categorizedMenu &&
          Object.keys(categorizedMenu).map(module => (
            <React.Fragment key={module}>
              {categorizedMenu[module].length > 0 && (
                <>
                  <Divider
                    sx={{ borderColor: '#D7D3D3', my: 1 }}
                    textAlign="left"
                  >
                    {drawerOpen && (
                      <KOSMenuModuleName open={drawerOpen} module={module} />
                    )}
                  </Divider>
                  {!drawerOpen && (
                    <KOSMenuModuleName open={drawerOpen} module={module} />
                  )}
                  <Box display="flex" flexDirection="column" gap={0.5}>
                    {categorizedMenu[module].map((menuItem: MenuItem) => (
                      <KOSMenuElement
                        key={`GlobalMenuElement-${menuItem?._id ??
                          `${menuItem.module}-${menuItem.title}`}`}
                        to={menuItem.navigateTo}
                        drawerOpen={drawerOpen}
                        icon={menuItem.icon}
                        label={menuItem.title}
                        shortLabel={menuItem.shortTitle}
                        selected={new RegExp(
                          `^${menuItem.navigateTo}$`,
                          'gi'
                        ).test(location.pathname)}
                        onClick={onClickMenuItem}
                      />
                    ))}
                  </Box>
                </>
              )}
            </React.Fragment>
          ))}
      </List>
    </Drawer>
  );
};

KOSMenu.defaultProps = {
  user: null,
  drawerOpen: false,
  loading: false,
  error: false,
  isBackButtonEnable: true,
  onBackAction: undefined,
  onClickMenuItem: undefined,
  sx: {},
};

export default KOSMenu;