import { Helmet } from 'react-helmet-async';
import { useLocation, useNavigate } from 'react-router-dom';

import { IconArrowLeft } from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

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

import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import IndividualShiftsTab from './IndividualShiftsTab';
import { useRepositoryDrawer } from '../ShiftsRepositoryDrawer/useRepositoryDrawer';
import { shiftsRoutes } from '../../routes';
import TemplatesTab from './TemplatesTab';

const TAB_INDIVIDUAL = 'individual';
const TAB_TEMPLATES = 'templates';
const CONTENT_MAX_WIDTH = 864;

const ShiftsRepositoryContent = () => {
  const { t } = useLokaliseTranslation('shifts');
  const navigate = useNavigate();
  const { pathname } = useLocation();
  const { RepositoryDrawer, showRepositoryDrawer } = useRepositoryDrawer();

  const selectedTab = pathname.startsWith(shiftsRoutes.templates())
    ? TAB_TEMPLATES
    : TAB_INDIVIDUAL;

  const handleTabChange = (value: string) => {
    if (value === TAB_TEMPLATES) {
      navigate(shiftsRoutes.templates());
    } else {
      navigate(shiftsRoutes.individualShifts());
    }
  };

  const title = t('shifts_repository');
  const tabs = [
    {
      label: t('individual_shifts'),
      value: TAB_INDIVIDUAL,
    },
    {
      label: t('templates.title'),
      value: TAB_TEMPLATES,
    },
  ];

  return (
    <>
      <Helmet>
        <title>{formatTitle(title)}</title>
      </Helmet>
      <Stack
        sx={{
          height: '100%',
          overflowY: 'auto',
          backgroundColor: ({ palette }) =>
            palette.new?.background?.layout?.default,
        }}
      >
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            backgroundColor: ({ palette }) =>
              palette.new?.background?.layout?.tertiary,
            px: 2,
            py: 1.5,
            gap: 1,
            position: 'sticky',
            top: 0,
            left: 0,
            zIndex: 200,
          }}
        >
          <IconButton
            aria-label={t('general:back')}
            sx={{ p: 0 }}
            onClick={() => navigate(shiftsRoutes.base())}
          >
            <IconArrowLeft />
          </IconButton>
          <Typography
            variant="globalL"
            fontWeight="fontWeightSemiBold"
          >
            {title}
          </Typography>
        </Stack>

        <Stack sx={{ alignItems: 'center', flex: 1, minHeight: 0, p: 3 }}>
          <Stack
            sx={{
              width: '100%',
              maxWidth: CONTENT_MAX_WIDTH,
              gap: 3,
              flex: 1,
              minHeight: 0,
            }}
          >
            <Tabs
              tabs={tabs}
              value={selectedTab}
              onTabChange={handleTabChange}
            />
            {selectedTab === TAB_INDIVIDUAL && (
              <IndividualShiftsTab
                onCreate={() => showRepositoryDrawer()}
                onEdit={shift => showRepositoryDrawer({ template: shift })}
              />
            )}
            {selectedTab === TAB_TEMPLATES && (
              <TemplatesTab
                onCreate={() => navigate(shiftsRoutes.createTemplate())}
                onEdit={rotation =>
                  navigate(shiftsRoutes.editTemplate(rotation.id))
                }
              />
            )}
          </Stack>
        </Stack>
      </Stack>
      {RepositoryDrawer}
    </>
  );
};

export default ShiftsRepositoryContent;
