/**
 * @deprecated — no Hugo equivalent.
 * Full-screen focus layout with a sticky navbar, close button, and content area.
 */
import type React from 'react';

import IconClose from '@material-hu/icons/material/Close';
import Button from '@material-hu/mui/Button';
import Container from '@material-hu/mui/Container';
import IconButton from '@material-hu/mui/IconButton';
import Stack, { type StackProps } from '@material-hu/mui/Stack';

import HuCircularProgress from '@material-hu/components/design-system/ProgressIndicators/Spinner';
import HuSkeleton from '@material-hu/components/design-system/Skeleton';
import HuTitle from '@material-hu/components/design-system/Title';

type Props = {
  navbarProps: NavbarProps;
  children: React.ReactNode;
  sx?: StackProps['sx'];
  loadingProps?: {
    renderSkeleton?: React.ReactNode;
    isLoading?: boolean;
  };
  childrenProps?: {
    sx?: StackProps['sx'];
    ref?: React.RefObject<HTMLDivElement>;
  };
  footerProps?: {
    cancelButtonProps?: {
      title: string;
      disabled?: boolean;
      onClick?: () => void;
    };
    saveButtonProps?: {
      title: string;
      disabled?: boolean;
      onClick?: () => void;
    };
  };
};

type NavbarProps = {
  title: string;
  onClick?: () => void;
};

const FocusView = ({
  navbarProps,
  childrenProps,
  children,
  sx,
  loadingProps,
  footerProps,
}: Props) => {
  const footerHeight = footerProps ? '72px' : '0px';
  const navbarHeight = '80px';
  const childrenHeight = `calc(100vh - ${navbarHeight} - ${footerHeight})`;

  return (
    <Stack
      sx={{
        width: '100%',
        backgroundColor: theme => theme.palette.new.background.layout.default,
        height: '100vh',
        ...sx,
      }}
    >
      <Stack
        sx={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
          backgroundColor: theme =>
            theme.palette.new.background.layout.tertiary,
          height: navbarHeight,
          px: 3,
        }}
      >
        {loadingProps?.isLoading && (
          <HuSkeleton
            width={300}
            height={24}
          />
        )}
        {!loadingProps?.isLoading && (
          <HuTitle
            title={navbarProps.title}
            variant="L"
          />
        )}
        <IconButton onClick={navbarProps.onClick}>
          <IconClose />
        </IconButton>
      </Stack>
      {loadingProps?.isLoading && (
        <Stack sx={{ py: 1 }}>
          {!loadingProps.renderSkeleton && <HuCircularProgress centered />}
          {loadingProps.renderSkeleton}
        </Stack>
      )}
      <Stack
        ref={childrenProps?.ref}
        sx={{
          height: childrenHeight,
          overflowY: 'auto',
          flex: 1,
          backgroundColor: theme => theme.palette.new.background.layout.default,
          py: 2,
          ...childrenProps?.sx,
        }}
      >
        {!loadingProps?.isLoading && children}
      </Stack>

      {footerProps && (
        <Stack
          sx={{
            backgroundColor: theme => theme.palette.newBase?.grey[100],
            py: 2,
            height: footerHeight,
          }}
        >
          <Container
            maxWidth="md"
            sx={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
            }}
          >
            <Button
              variant="outlined"
              size="large"
              onClick={footerProps.cancelButtonProps?.onClick}
              disabled={footerProps.cancelButtonProps?.disabled}
            >
              {footerProps.cancelButtonProps?.title}
            </Button>
            <Button
              variant="primary"
              size="large"
              onClick={footerProps.saveButtonProps?.onClick}
              disabled={footerProps.saveButtonProps?.disabled}
            >
              {footerProps.saveButtonProps?.title}
            </Button>
          </Container>
        </Stack>
      )}
    </Stack>
  );
};

export default FocusView;