import { useEffect, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';

import { useDrawerV2 } from '@material-hu/hooks/useDrawerV2';
import Container from '@material-hu/mui/Container';
import Stack from '@material-hu/mui/Stack';

import HuCircularProgress from '@material-hu/components/design-system/ProgressIndicators/Spinner';
import HuTabs from '@material-hu/components/design-system/Tabs';

import {
  useGetManagerTypes,
  useVacations,
} from 'src/hooks/queryHooks/vacations';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import CalendarView from 'src/pages/dashboard/timeOff/components/CalendarView';
import ManagerViewBalances from 'src/pages/dashboard/timeOff/components/ManagerViewBalances';
import ManagerViewRequests from 'src/pages/dashboard/timeOff/components/ManagerViewRequests';
import { SectionsManager, VacationStatus } from 'src/types/vacations';
import { insertIf } from 'src/utils/arrays';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { getRequestDetailsDrawer } from './components/Drawers/RequestDetailsDrawer';
import { TimeOffHelmet } from './components/helmet/TimeOffHelmet';
import useVacationsFilter from './components/shared/useVacationsFilter';
import { useIsFemsa } from './femsa/hooks/useIsFemsa';
import { vacationsRoutes } from './routes';

enum TABS {
  REQUESTS = 'requests',
  BALANCES = 'balances',
  CALENDAR = 'calendar',
}

const ManagerView = () => {
  const { manager: managerData, isLoadingViews } = useVacations();
  const { policyTypes, hasRequests } = managerData;
  const HuGoThemeProvider = useHuGoTheme();
  const [selectedTab, setSelectedTab] = useState<string>(TABS.REQUESTS);
  const [searchParams] = useSearchParams();
  const vacationId = searchParams.get('vacationId');
  const isFemsa = useIsFemsa();
  const navigate = useNavigate();

  if (isFemsa) {
    navigate(vacationsRoutes.vacations());
  }

  const { t } = useLokaliseTranslation(['time_off', 'general']);
  const { isAdmin, isManager } = useGetManagerTypes();

  const requestsFilters = useVacationsFilter({
    policyTypes,
    showStates: true,
    showDates: true,
    sortable: true,
    section: SectionsManager.REQUESTS,
  });
  const balanceFilters = useVacationsFilter({
    policyTypes,
    section: SectionsManager.BALANCES,
    isBalances: true,
  });
  const calendarFilters = useVacationsFilter({
    policyTypes,
    showStates: true,
    excludedStates: [VacationStatus.CANCELLED, VacationStatus.REJECTED],
    isCalendar: true,
    section: SectionsManager.CALENDAR,
  });

  const tabs = [
    {
      label: t('requests'),
      value: TABS.REQUESTS,
      component: <ManagerViewRequests filters={requestsFilters} />,
    },
    ...insertIf(isAdmin || isManager, {
      label: t('balances'),
      value: TABS.BALANCES,
      component: <ManagerViewBalances filters={balanceFilters} />,
    }),
    ...insertIf(hasRequests, {
      label: t('calendar'),
      value: TABS.CALENDAR,
      component: <CalendarView filters={calendarFilters} />,
    }),
  ];

  const { drawer: requestDetailDrawer, showDrawer: showRequestDetailDrawer } =
    useDrawerV2(args =>
      getRequestDetailsDrawer({
        ...args,
        requestId: Number(vacationId),
        isManagerView: true,
      }),
    );

  useEffect(() => {
    if (vacationId) {
      showRequestDetailDrawer({});
    }
  }, [vacationId]);

  return (
    <HuGoThemeProvider>
      <TimeOffHelmet />
      {requestDetailDrawer}
      {!isLoadingViews && (
        <Stack
          sx={{
            backgroundColor: ({ palette }) =>
              palette.new.background.layout.default,
            height: '100%',
            overflow: 'auto',
          }}
        >
          <Container
            maxWidth="xl"
            sx={{ px: 2, py: 3 }}
          >
            <HuTabs
              tabs={tabs}
              onTabChange={setSelectedTab}
              value={selectedTab}
            />
            {tabs.find(tab => tab.value === selectedTab)?.component}
          </Container>
        </Stack>
      )}
      {isLoadingViews && <HuCircularProgress />}
    </HuGoThemeProvider>
  );
};

export default ManagerView;