import React, { ReactNode } from 'react';
import { Box, MultiSelectBanner } from '@nova-hf/ui';
import { MultiSelectBannerProps } from '@nova-hf/ui/umd/ts/src/banners/multiselect-banner/MultiSelectBanner';
import { GreyScaleColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import { FooterContainer } from 'beta/containers/footer/Footer';
import NavbarContainer from 'beta/containers/navbar/NavbarContainer';
import classNames from 'classnames/bind';
import { useParams } from 'next/navigation';

import { getFeatureFlags } from '../feature-flags/FeatureFlags';

import s from './Layout.module.scss';
const cn = classNames.bind(s);

type LayoutProps = {
  children: ReactNode;
  hasSideMenu?: boolean;
  hasCustomerMenu?: boolean;
  hideFooter?: boolean;
  backgroundColor?: GreyScaleColorType;
  hideNavbar?: boolean;
  multiSelectBannerProps?: MultiSelectBannerProps;
  hasMultiSelectBanner?: boolean;
};

const Layout = ({
  children,
  hasSideMenu,
  hasCustomerMenu,
  backgroundColor,
  hideFooter,
  hideNavbar,
  multiSelectBannerProps,
  hasMultiSelectBanner,
}: LayoutProps) => {
  const featureFlags = getFeatureFlags();
  const isBetaFlagActive = featureFlags['beta'];
  const customerId = useParams()?.customerId;
  const isOpenForBusiness = !!customerId;
  return (
    <div>
      {!isBetaFlagActive && !isOpenForBusiness ? (
        <Box>Síða fannst ekki....</Box>
      ) : (
        <>
          {!hideNavbar && <NavbarContainer />}
          {!hideNavbar && <Box width="100%" height={[18, 14]} />}
          <Box
            backgroundColor={hasSideMenu ? 'grey100' : 'white'}
            display="flex"
            flexDirection="column"
            flexGrow={1}
            marginTop={{
              sm: hasSideMenu ? 20 : hasCustomerMenu ? 9 : 0,
              md: hasCustomerMenu ? 14 : 0,
              lg: 0,
            }}
            className={cn({
              [s.contentWrapperWithSideMenu]: hasSideMenu,
              [s.contentWrapperWithCustomerMenu]: hasCustomerMenu,
            })}
          >
            <Box
              flexGrow={1}
              backgroundColor={backgroundColor}
              paddingBottom={[6, 10, hideFooter ? 10 : 14]}
            >
              {children}
            </Box>
            <Box width="100%" style={{ paddingRight: '266px' }} position="fixed" bottom={0}>
              {hasMultiSelectBanner && <MultiSelectBanner {...multiSelectBannerProps} />}
            </Box>
            {!hideFooter && <FooterContainer />}
          </Box>
        </>
      )}
    </div>
  );
};

export default Layout;