import React, { ReactNode, useEffect } from 'react';
import { Box, CardBase, Icon, IconButton, IconType, MainButton, Text, Tooltip } from '@nova-hf/ui';
import { MainButtonProps } from '@nova-hf/ui/umd/ts/src/buttons/MainButton/MainButton';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import Wrapper from 'components/app-layout/Wrapper';
import { inject } from 'mobx-react';
import { useRouter } from 'next/router';
import Authentication from 'store/authentication';
import UI from 'store/ui';
import { useTranslation } from 'utils/i18n';

interface MultiActionsWrapperProps {
  authentication: Authentication;
  ui: UI;
  color: MainColorType;
  title: string;
  children?: ReactNode;
  childrenSide?: ReactNode;
  subTitle?: string;
  icon?: IconType;
  button?: MainButtonProps;
  mainButton?: MainButtonProps;
  totalChecks?: number;
  needsBiggerWidth?: boolean;
}

const MultiActionsWrapper = ({
  authentication,
  title,
  ui,
  subTitle,
  children,
  childrenSide,
  icon,
  mainButton,
  totalChecks,
  needsBiggerWidth,
}: MultiActionsWrapperProps) => {
  const router = useRouter();
  const { t } = useTranslation('multi');
  const ssn = router?.query?.ssn;
  const handleBackClick = () => {
    ui?.setHasMultiMenu(false);
    router.push(`/${ssn}/fjoldaskraning`);
  };
  useEffect(() => {
    ui?.setHasMultiMenu(true);
  }, []);

  if (!authentication.isStaff) {
    return null;
  }

  return (
    <Wrapper noFooter header="none">
      <Box style={{ minHeight: '100vh', overflowY: 'hidden' }} display="flex" flexDirection="row">
        <Box
          display="flex"
          flexDirection="column"
          justifyContent="space-between"
          padding={5}
          backgroundColor="black100"
        >
          <Box gap={1} display="flex" flexDirection="column">
            <Box marginBottom={5} position="absolute" left={1} top={1}>
              <IconButton
                color="pink"
                hiddenButtonText="backButton"
                icon="longArrowLeft"
                size={32}
                onClick={() => handleBackClick()}
              />
            </Box>
            <Box
              marginTop={5}
              alignItems="center"
              display="flex"
              flexDirection="row"
              justifyContent="space-between"
            >
              <Text color="white" variant="h6">
                {title}
              </Text>
              <Icon size={40} icon={icon ?? 'novaLogo'} />
            </Box>
            <Text color="grey500" variant="subtitleBold">
              {subTitle}
            </Text>
            <Box marginTop={4}>{childrenSide}</Box>
          </Box>
          <Box
            borderTopStyle="solid"
            borderWidth="1px"
            borderColor="grey500"
            position="absolute"
            style={{ width: needsBiggerWidth ? '500px' : '430px' }}
            marginX={-5}
            bottom={0}
          >
            <Box
              alignItems="center"
              justifyContent="space-between"
              display="flex"
              flexDirection="row"
              padding={5}
            >
              <Text variant="subtitleBold" color="white">{`${totalChecks} ${t(
                'multi.selected',
              )}`}</Text>
              <Tooltip shouldShowOnHover>
                <CardBase borderColor="grey200" dottedShadow="none" hasBorder>
                  <Box display="flex" flexDirection="column" padding={2}>
                    <Text marginBottom={1} variant="pXSmallBold">
                      {t('multi.tooltipHeader')}
                    </Text>
                    <Text marginBottom={1} variant="pXSmallRegular">
                      {t('multi.tooltipDescription')}
                    </Text>
                  </Box>
                </CardBase>
              </Tooltip>
            </Box>
            <MainButton {...mainButton} />
          </Box>
        </Box>
        <Box padding={10}>{children}</Box>
      </Box>
    </Wrapper>
  );
};

export default inject('authentication', 'ui')(MultiActionsWrapper);