import { useNavigate, useParams } from 'react-router-dom';

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

import TaskFocusLayout from '@material-hu/components/composed-components/TaskFocusLayout';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { MenuItems } from 'src/pages/dashboard/performance/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { performanceRoutes } from '../routes';
import { MENU_ITEM_URL_VALUES } from '../utils';

import CalibrationDetailContent from './components/CalibrationDetailContent';
import CalibrationNavigationSidebar from './components/CalibrationNavigationSidebar';
import { SIDEBAR_WIDTH } from './constants';

const CalibrationDetail = () => {
  const { id, formReviewId: formReviewIdParam } = useParams();
  const navigate = useNavigate();
  const { t } = useLokaliseTranslation(['performance']);
  const HuGoThemeProvider = useHuGoTheme();

  const formReviewId = Number(formReviewIdParam);

  const handleBack = () => {
    if (!id) {
      navigate(performanceRoutes.performance());
      return;
    }
    navigate(
      `${performanceRoutes.review.detail(Number(id))}?menu=${MENU_ITEM_URL_VALUES[MenuItems.CALIBRATION]}`,
    );
  };

  const handleClose = () => navigate(performanceRoutes.performance());

  if (!id || !formReviewId) {
    handleBack();
    return null;
  }

  return (
    <HuGoThemeProvider>
      <TaskFocusLayout
        slotProps={{
          root: {
            sx: {
              height: '100%',
              minHeight: '100%',
              display: 'flex',
              flexDirection: 'column',
              overflow: 'hidden',
              backgroundColor: 'new.background.layout.default',
            },
          },
          header: {
            title: t('cycles.steps.calibration'),
            onBack: handleBack,
            onClose: handleClose,
          },
        }}
      >
        <Stack
          sx={{
            flexDirection: 'row',
            flex: 1,
            minHeight: 0,
            overflow: 'hidden',
            alignItems: 'stretch',
            width: '100%',
          }}
        >
          <Stack
            sx={{
              width: SIDEBAR_WIDTH,
              flexShrink: 0,
              boxSizing: 'border-box',
              p: 2,
              backgroundColor: 'background.paper',
              minHeight: 0,
              overflowY: 'auto',
            }}
          >
            <CalibrationNavigationSidebar
              cycleId={id}
              formReviewId={formReviewId}
            />
          </Stack>
          <Stack
            sx={{
              flex: 1,
              minWidth: 0,
              minHeight: 0,
              overflow: 'auto',
              p: 3,
              alignItems: 'center',
              boxSizing: 'border-box',
            }}
          >
            <CalibrationDetailContent
              cycleId={id}
              formReviewId={formReviewId}
            />
          </Stack>
        </Stack>
      </TaskFocusLayout>
    </HuGoThemeProvider>
  );
};

export default CalibrationDetail;