import { IconCalendarWeek } from '@material-hu/icons/tabler';
import { List } from '@material-hu/mui';

import HuSidebarNavItem from '@material-hu/components/design-system/Sidebar/components/NavItem';

import {
  useGetManagerTypes,
  useGetNotificationsVacations,
  useVacations,
} from 'src/hooks/queryHooks/vacations';
import useCustomServerTranslation from 'src/hooks/useCustomServerTranslation';
import { FemsaSidebar } from 'src/pages/dashboard/timeOff/femsa/components/FemsaSidebar';
import { useIsFemsa } from 'src/pages/dashboard/timeOff/femsa/hooks/useIsFemsa';
import { vacationsRoutes } from 'src/pages/dashboard/timeOff/routes';
import { useLokaliseTranslation } from 'src/utils/i18n';

import itemsConfig from '../constants';
import useGetSidebarIcon from '../hooks/useSidebarIcon';
import { type SidebarItemProps } from '../types';
import { getItemIsActive, getSubItemIsActive } from '../utils';

const { key, titleTranslationKey } = itemsConfig.timeOff;

const PATH = vacationsRoutes.vacations();

const NavTimeOffItem = (props: SidebarItemProps) => {
  const { isCollapsed = false, onClick, isActive: isActiveProp } = props;
  const { isManager, isAdmin } = useGetManagerTypes();
  const { manager } = useVacations();
  const { t } = useLokaliseTranslation('time_off');
  const isFemsa = useIsFemsa();

  const title = useCustomServerTranslation({
    module: 'TIME_OFF',
    defaultTranslationKey: titleTranslationKey,
    namespace: 'dashboard_sidebar_app',
  });

  if (isFemsa) {
    return (
      <FemsaSidebar
        isActive={isActiveProp}
        title={title}
      />
    );
  }

  const managerHasRequests = manager?.hasRequests;

  const notifications = useGetNotificationsVacations();

  const { Icon } = useGetSidebarIcon({
    defaultIcon: IconCalendarWeek,
    key: 'Time off',
  });

  const canViewManagerTab = isManager || isAdmin || managerHasRequests;

  const managerNotifications =
    notifications?.vacationRequestsAsManagerNotifications;

  const collaboratorNotifications =
    notifications?.vacationRequestsAsCollaboratorNotifications;

  const subItems = [
    {
      key: 'timeOffPersonalSpace',
      path: vacationsRoutes.vacations(),
      title: t('PERSONAL_SPACE'),
      info: {
        notificationCount: collaboratorNotifications,
      },
    },
    {
      key: 'timeOffManager',
      path: vacationsRoutes.manager(),
      title: t('MANAGEMENT'),
      info: {
        notificationCount: managerNotifications,
      },
    },
  ];

  const isActive =
    isActiveProp ?? subItems.some(item => getItemIsActive(item.path));

  const renderSubItems = () => {
    if (isCollapsed) return null;

    return (
      <List
        disablePadding
        sx={{
          '& > *:not(:last-child)': {
            mb: 0,
          },
        }}
      >
        {subItems.map((item, index) => (
          <HuSidebarNavItem
            key={item.key}
            title={item.title}
            path={item.path}
            info={item.info}
            depth={1}
            isLastChild={index === subItems.length - 1}
            isCollapsed={isCollapsed}
            active={isActiveProp ?? getSubItemIsActive(item.path)}
            onClick={onClick}
          />
        ))}
      </List>
    );
  };

  return (
    <HuSidebarNavItem
      key={key}
      depth={0}
      title={title}
      icon={<Icon />}
      path={PATH}
      isCollapsed={isCollapsed}
      onClick={canViewManagerTab ? undefined : onClick}
      active={isActive}
      info={{
        notificationCount: managerNotifications + collaboratorNotifications,
      }}
    >
      {canViewManagerTab && renderSubItems()}
    </HuSidebarNavItem>
  );
};

export default NavTimeOffItem;