import { PropsWithChildren } from 'react';
import { useNavigate } from 'react-router';

import { IconInfoTriangle } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import Button from '@material-hu/components/design-system/Buttons/Button';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuTitle from '@material-hu/components/design-system/Title';
import { TitleProps as HuTitleProps } from '@material-hu/components/design-system/Title/types';

import humandLogo from 'src/assets/humand.svg';
import { useLokaliseTranslation } from 'src/utils/i18n';

export const Container = (props: PropsWithChildren) => {
  const { children } = props;

  return (
    <Stack
      sx={{
        backgroundColor: theme => theme.palette.hugoBackground?.neutralBg,
        flex: 1,
        width: '100vw',
        height: '100vh',
        display: 'flex',
        alignItems: 'center',
        p: 8,
      }}
    >
      <Stack
        sx={{
          gap: 9,
          maxWidth: '400px',
          margin: '0 auto',
        }}
      >
        <img
          alt="humand logo"
          src={humandLogo}
          style={{ height: 30, width: 181 }}
        />
        <Stack
          sx={{
            gap: 3,
          }}
        >
          {children}
        </Stack>
      </Stack>
    </Stack>
  );
};

export type CardContainerProps = PropsWithChildren;

export const CardContainer = (props: CardContainerProps) => {
  const { children } = props;

  return (
    <HuCardContainer fullWidth>
      <Stack
        sx={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          gap: 2,
        }}
      >
        <HuAvatar
          Icon={IconInfoTriangle}
          color="error"
          size="large"
        />
        {children}
      </Stack>
    </HuCardContainer>
  );
};

export type TitleProps = HuTitleProps;

export const Title = (props: TitleProps) => {
  const { title, description } = props;

  return (
    <HuTitle
      variant="L"
      title={title}
      description={description}
      centered
    />
  );
};

export type ActionsProps = PropsWithChildren<{
  withBack?: boolean;
}>;

export const Actions = (props: ActionsProps) => {
  const { children, withBack = true } = props;

  const { t } = useLokaliseTranslation('authentication');

  const navigate = useNavigate();

  const handleBack = () => {
    navigate('');
  };

  return (
    <Stack
      sx={{
        gap: 2,
        width: '100%',
      }}
    >
      {children}
      {withBack && (
        <Button
          variant="secondary"
          size="large"
          onClick={handleBack}
        >
          {t('BACK_START')}
        </Button>
      )}
    </Stack>
  );
};

export const Error = {
  Container,
  CardContainer,
  Title,
  Actions,
};

export default Error;