import { type ReactNode } from 'react';

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

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

import useHuGoTheme from 'src/hooks/useHuGoTheme';

import { useSportsPoolTheme } from '../context/SportsPoolThemeContext';
import useIsSportsPoolMobilePath from '../hooks/useIsSportsPoolMobilePath';
import useWebViewStyles from '../hooks/useWebViewStyles';

type SportsPoolLayoutProps = {
  children: ReactNode;
  slotProps: Parameters<typeof TaskFocusLayout>[0]['slotProps'];
};

const SportsPoolLayout = ({ children, slotProps }: SportsPoolLayoutProps) => {
  const themeParam = useSportsPoolTheme();
  const HuGoThemeProvider = useHuGoTheme(themeParam);
  const isMobileWebView = useIsSportsPoolMobilePath();
  useWebViewStyles();

  if (isMobileWebView) {
    return (
      <HuGoThemeProvider>
        <Stack
          {...slotProps.root}
          sx={{
            height: '100%',
            width: '100%',
            ...slotProps.root?.sx,
          }}
        >
          {children}
        </Stack>
      </HuGoThemeProvider>
    );
  }

  return (
    <HuGoThemeProvider>
      <TaskFocusLayout slotProps={slotProps}>{children}</TaskFocusLayout>
    </HuGoThemeProvider>
  );
};

export default SportsPoolLayout;