import { useState } from 'react';

import Container from '@material-hu/mui/Container';
import Stack from '@material-hu/mui/Stack';

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

import { useAuth } from 'src/contexts/JWTContext';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { SectionsManager, VacationStatus } from 'src/types/vacations';
import { insertIf } from 'src/utils/arrays';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { CollaboratorViewProvider } from '../../CollaboratorViewContext';
import FemsaRequests from '../../femsa/components/FemsaRequests';
import { useIsFemsa } from '../../femsa/hooks/useIsFemsa';
import { CalendarView } from '../CalendarView';
import useVacationsFilter from '../shared/useVacationsFilter';

import RequestView from './components/RequestView';

const CollaboratorView = () => {
  const { t } = useLokaliseTranslation('time_off');
  const HuGoThemeProvider = useHuGoTheme();
  const [selectedTab, setSelectedTab] = useState('requests');
  const { instance } = useAuth();

  const isFemsa = useIsFemsa();

  if (isFemsa) {
    return <FemsaRequests />;
  }

  const calendarFilters = useVacationsFilter({
    policyTypes: [],
    showStates: true,
    excludedStates: [VacationStatus.CANCELLED, VacationStatus.REJECTED],
    isCalendar: true,
    section: SectionsManager.CALENDAR,
    isManagerView: false,
  });

  const tabs = [
    {
      label: t('requests'),
      value: 'requests',
      component: <RequestView />,
    },
    ...insertIf(instance?.vacationPublicCalendar!, {
      label: t('calendar'),
      value: 'calendar',
      component: (
        <CalendarView
          filters={calendarFilters}
          isManagerView={false}
        />
      ),
    }),
  ];

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

export default CollaboratorView;
