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

import isNil from 'lodash-es/isNil';
import Stack from '@material-hu/mui/Stack';

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

import {
  MenuItems,
  type ReviewDetail,
  type ReviewTemplateWrapper,
} from 'src/pages/dashboard/performance/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

import ReviewsMenu from '../../components/ReviewsMenu';
import { usePerformanceReview } from '../../PerformanceReviewContext';
import { performanceRoutes } from '../../routes';
import { REVIEW_MAIN_COLUMN_MAX_WIDTH } from '../constants';

import ReviewContent from './ReviewContent';
import ReviewNavigationSidebar from './ReviewNavigationSidebar';

type PerformanceReviewLayoutProps = {
  cycleName: string;
  reviews: ReviewDetail[];
  reviewedFormReviews: ReviewDetail[];
  isLoading: boolean;
  isResponsible: boolean;
  cycleStatus: ReviewDetail['status'];
  canBeSharedBeforeCycleFinish: boolean;
  formTemplates?: ReviewTemplateWrapper[];
};

const PerformanceReviewLayout = (props: PerformanceReviewLayoutProps) => {
  const {
    cycleName,
    reviews,
    reviewedFormReviews,
    isLoading,
    isResponsible,
    cycleStatus,
    canBeSharedBeforeCycleFinish,
    formTemplates,
  } = props;

  const navigate = useNavigate();
  const location = useLocation();
  const { t } = useLokaliseTranslation(['performance']);
  const {
    selectedReview,
    setSelectedReview,
    menuSelected,
    userToShareId,
    setUserToShareId,
    viewingReviewId,
    setViewingReviewId,
  } = usePerformanceReview();

  const fullScreenReview =
    (menuSelected === MenuItems.SHARE_RESULTS ||
      menuSelected === MenuItems.MY_RESULTS) &&
    !isNil(viewingReviewId);

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

  const handleBack = () => {
    if (
      !isNil(viewingReviewId) &&
      (menuSelected === MenuItems.SHARE_RESULTS ||
        menuSelected === MenuItems.MY_RESULTS)
    ) {
      setViewingReviewId(null);
      return;
    }
    if (!isNil(selectedReview) && menuSelected === MenuItems.COMPLETE_REVIEW) {
      setSelectedReview(null);
      return;
    }
    if (!isNil(userToShareId) && menuSelected === MenuItems.SHARE_RESULTS) {
      setUserToShareId(null);
      return;
    }
    if (location.key !== 'default') {
      navigate(-1);
    } else {
      navigate(performanceRoutes.performance());
    }
  };

  const showReviewNavigation =
    !isNil(selectedReview) && menuSelected === MenuItems.COMPLETE_REVIEW;
  const fullScreenTitle =
    menuSelected === MenuItems.MY_RESULTS
      ? t('my_results')
      : t('deliver_results');

  return (
    <TaskFocusLayout
      slotProps={{
        root: {
          sx: {
            height: '100%',
            minHeight: '100%',
            display: 'flex',
            flexDirection: 'column',
            overflow: 'hidden',
            backgroundColor: 'new.background.layout.default',
          },
        },
        header: {
          title: fullScreenReview ? fullScreenTitle : cycleName,
          onBack: handleBack,
          onClose: handleClose,
        },
      }}
    >
      <Stack
        id="review-layout"
        sx={{
          flexDirection: 'row',
          flex: 1,
          minHeight: 0,
          overflow: 'hidden',
          alignItems: 'stretch',
          width: '100%',
        }}
      >
        <Stack
          sx={{
            width: 360,
            flexShrink: 0,
            boxSizing: 'border-box',
            p: 2,
            backgroundColor: 'background.paper',
            minHeight: 0,
            overflowY: 'auto',
            display: fullScreenReview ? 'none' : undefined,
          }}
        >
          {showReviewNavigation ? (
            <ReviewNavigationSidebar />
          ) : (
            <ReviewsMenu
              isLoading={isLoading}
              reviews={reviews}
              reviewedFormReviews={reviewedFormReviews}
              isResponsible={isResponsible}
              cycleStatus={cycleStatus}
              canBeSharedBeforeCycleFinish={canBeSharedBeforeCycleFinish}
              formTemplates={formTemplates}
            />
          )}
        </Stack>
        <Stack
          sx={{
            flex: 1,
            minWidth: 0,
            minHeight: 0,
            overflow: 'auto',
            p: 3,
            alignItems: 'center',
            boxSizing: 'border-box',
          }}
        >
          {fullScreenReview ? (
            <Stack
              sx={{
                flex: 1,
                width: '100%',
                maxWidth: REVIEW_MAIN_COLUMN_MAX_WIDTH,
                minWidth: 0,
              }}
            >
              <ReviewContent />
            </Stack>
          ) : (
            <ReviewContent />
          )}
        </Stack>
      </Stack>
    </TaskFocusLayout>
  );
};

export default PerformanceReviewLayout;
