import { type FC, type ReactNode } from 'react';
import { Helmet } from 'react-helmet-async';
import { Outlet } from 'react-router';

import { IconArrowLeft } from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography, { type TypographyProps } from '@material-hu/mui/Typography';
import useMediaQuery from '@material-hu/mui/useMediaQuery';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import ConversationsMaintenancePanel from 'src/pages/dashboard/Conversations/components/ConversationsMaintenancePanel';
import { useConversationsMaintenance } from 'src/pages/dashboard/Conversations/stores/maintenanceStore';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

type SidebarConversationsProps = {
  title: string;
  onBack?: () => void;
  step?: number;
  variantTitle?: TypographyProps['variant'];
  subtitle?: string;
  children: ReactNode;
  callToActionHeader: ReactNode;
};

const SidebarConversations: FC<SidebarConversationsProps> = props => {
  const {
    title,
    onBack,
    step,
    variantTitle = 'globalL',
    children,
    callToActionHeader,
    subtitle,
  } = props;
  const { t } = useLokaliseTranslation('chat');
  const HuGoThemeProvider = useHuGoTheme();
  const themeBreakpoint = useTheme();
  const isMobile = useMediaQuery(themeBreakpoint.breakpoints.down('sm'));
  const { isConversationsMaintenance } = useConversationsMaintenance();

  const showChat = !isMobile;
  return (
    <HuGoThemeProvider>
      <Helmet>
        <title>{formatTitle(t('chats'))}</title>
      </Helmet>
      {isConversationsMaintenance && (
        <Stack sx={{ height: '100%', minHeight: 0, width: '100%' }}>
          <ConversationsMaintenancePanel />
        </Stack>
      )}
      {!isConversationsMaintenance && (
        <Stack
          sx={{
            flexDirection: 'row',
            height: '100%',
            width: '100%',
          }}
        >
          <Stack
            sx={{
              background: theme => theme.palette.new.background.layout.tertiary,
              minWidth: '360px',
              height: '100%',
              overflow: 'hidden',
              borderRight: 1,
              borderColor: theme => theme.palette.new.border.neutral.default,
              maxWidth: '360px',
            }}
          >
            <Stack sx={{ p: 2 }}>
              <Stack
                sx={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                }}
              >
                <Stack
                  sx={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    gap: 1,
                  }}
                >
                  {step !== undefined && step > 0 && (
                    <IconButton
                      variant="tertiary"
                      onClick={onBack}
                      sx={{
                        color: theme => theme.palette.new.text.neutral.default,
                      }}
                    >
                      <IconArrowLeft
                        width={24}
                        height={24}
                      />
                    </IconButton>
                  )}
                  <Typography
                    variant={variantTitle}
                    fontWeight="fontWeightSemiBold"
                  >
                    {title}
                  </Typography>
                </Stack>
                {callToActionHeader}
              </Stack>
              {subtitle && (
                <Typography variant="globalXS">{subtitle}</Typography>
              )}
            </Stack>
            {children}
          </Stack>
          {showChat && <Outlet />}
        </Stack>
      )}
    </HuGoThemeProvider>
  );
};

export default SidebarConversations;