import type React from 'react';
import { type FC } from 'react';

import IconClose from '@material-hu/icons/material/Close';
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';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { useLokaliseTranslation } from 'src/utils/i18n';

type Props = {
  navbarProps: NavbarProps;
  content: React.ReactNode;
  bottomBarContent?: React.ReactNode;
  sx?: StackProps['sx'];
  loadingProps?: {
    renderSkeleton?: React.ReactNode;
    isLoading?: boolean;
  };
  bottomBarSx?: StackProps['sx'];
};

type NavbarProps = {
  title: string;
  onClick?: () => void;
  extraButtons?: React.ReactNode;
  sx?: StackProps['sx'];
};

const FocusNavbar: FC<Props> = ({
  navbarProps,
  content,
  bottomBarContent,
  sx,
  bottomBarSx,
  loadingProps,
}) => {
  const { t } = useLokaliseTranslation('general');
  const HuGoThemeProvider = useHuGoTheme();

  return (
    <HuGoThemeProvider>
      <Stack
        sx={{
          width: '100%',
          backgroundColor: theme => theme.palette.new.background.layout.default,
          height: '100vh',
          flexDirection: 'column',
          ...sx,
        }}
      >
        <Stack
          sx={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
            backgroundColor: theme =>
              theme.palette.new.background.layout.tertiary,
            py: 1,
            height: 80,
            px: 3,
            flexShrink: 0,
            ...navbarProps.sx,
          }}
        >
          {loadingProps?.isLoading && (
            <HuSkeleton
              width={300}
              height={24}
            />
          )}
          {!loadingProps?.isLoading && (
            <HuTitle
              title={navbarProps.title}
              variant="L"
            />
          )}
          <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 2 }}>
            {navbarProps.extraButtons ?? null}

            <IconButton
              onClick={navbarProps.onClick}
              aria-label={t('close')}
            >
              <IconClose />
            </IconButton>
          </Stack>
        </Stack>
        {loadingProps?.isLoading && (
          <Stack
            sx={{
              py: 1,
              flexShrink: 0,
            }}
          >
            {!loadingProps.renderSkeleton && <HuCircularProgress centered />}
            {loadingProps.renderSkeleton}
          </Stack>
        )}
        <Stack sx={{ flex: 1, minHeight: 0, overflow: 'auto' }}>
          {!loadingProps?.isLoading && content}
        </Stack>
        {bottomBarContent && (
          <Stack
            sx={{
              backgroundColor: theme =>
                theme.palette.new.background.layout.tertiary,
              p: 2,
              justifyContent: 'center',
              alignItems: 'center',
              height: 80,
              flexShrink: 0,
              ...bottomBarSx,
            }}
          >
            {bottomBarContent}
          </Stack>
        )}
      </Stack>
    </HuGoThemeProvider>
  );
};

export default FocusNavbar;