import { type PropsWithChildren } from 'react';

import Stack, { type StackProps } from '@material-hu/mui/Stack';

import { LAYOUT_MAX_WIDTH } from '../../../constants';
import useRoutes from '../../../hooks/useRoutes';
import CourseHeader from '../../Detail/components/CourseHeader';
import { type Course } from '../../types';

import { TasksFooter, type TasksFooterProps } from './TasksFooter';
import TasksSidebar from './TasksSidebar';

export type MainLayoutProps = PropsWithChildren<
  TasksFooterProps &
    StackProps & {
      hideSidebar?: boolean;
      course: Course | undefined;
      loading?: boolean;
    }
>;

export const MainLayout = ({
  hideSidebar = false,
  previousButton,
  nextButton,
  course,
  loading = false,
  children,
  ...stackProps
}: MainLayoutProps) => {
  const routes = useRoutes();

  return (
    <Stack
      sx={{
        width: '100%',
        backgroundColor: ({ palette }) => palette.new.background.layout.default,
        height: '100%',
        minHeight: '100vh',
      }}
    >
      <CourseHeader
        title={course?.title ?? ''}
        backRoute={course ? routes.courses.detail(course.id) : ''}
      />
      <Stack
        {...stackProps}
        sx={{
          flexDirection: 'row',
          flex: 1,
          overflow: 'hidden',
          width: '100%',
          ...stackProps.sx,
        }}
      >
        <TasksSidebar
          course={course}
          loading={loading}
          hide={hideSidebar}
        />
        <Stack
          sx={{
            flex: 1,
            width: '100%',
            overflow: 'auto',
          }}
        >
          <Stack
            sx={{
              maxWidth: LAYOUT_MAX_WIDTH,
              width: '100%',
              flex: 1,
              mx: 'auto',
              p: 3,
              gap: 2,
              '& > div': {
                width: '100%',
              },
            }}
          >
            {children}
          </Stack>
          <TasksFooter
            previousButton={previousButton}
            nextButton={nextButton}
          />
        </Stack>
      </Stack>
    </Stack>
  );
};

export default MainLayout;