import { type ComponentProps } from 'react';

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

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

import { type ReviewDetail } from 'src/pages/dashboard/performance/types';

import ReviewsMenu from '../../components/ReviewsMenu';
import { usePerformanceReview } from '../../PerformanceReviewContext';

import ExternalReview from './ExternalReview';

type ExternalReviewLayoutProps = {
  cycleName: string;
  isLoading: boolean;
  isResponsible: boolean;
  reviews: ReviewDetail[];
  reviewedFormReviews: ReviewDetail[];
};

const ExternalReviewLayout = ({
  cycleName,
  isLoading,
  isResponsible,
  reviews,
  reviewedFormReviews,
}: ExternalReviewLayoutProps) => {
  const { selectedReview, setSelectedReview } = usePerformanceReview();

  const handleBack = !isNil(selectedReview)
    ? () => setSelectedReview(null)
    : undefined;

  return (
    <TaskFocusLayout
      slotProps={
        {
          root: {
            sx: {
              height: '100%',
              minHeight: '100%',
              display: 'flex',
              flexDirection: 'column',
              overflow: 'hidden',
              backgroundColor: 'new.background.layout.default',
            },
          },
          header: {
            title: cycleName,
            onBack: handleBack,
          },
        } as ComponentProps<typeof TaskFocusLayout>['slotProps']
      }
    >
      <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',
          }}
        >
          <ReviewsMenu
            isLoading={isLoading}
            reviews={reviews}
            reviewedFormReviews={reviewedFormReviews}
            isResponsible={isResponsible}
            isExternal
            canBeSharedBeforeCycleFinish={false}
          />
        </Stack>
        <Stack
          sx={{
            flex: 1,
            minWidth: 0,
            minHeight: 0,
            overflow: 'auto',
            p: 3,
            alignItems: 'center',
            boxSizing: 'border-box',
          }}
        >
          <ExternalReview />
        </Stack>
      </Stack>
    </TaskFocusLayout>
  );
};

export default ExternalReviewLayout;