import { ReactElement, ReactNode } from 'react';
import styled from 'styled-components';
import { spacing } from '../../../spacing';
import { ThemeColors } from '../../../style/theme';

const Container = styled.div`
  display: flex;
  flex-direction: row;
  flex: 1;
  overflow: hidden;
  color: ${(props) => props.theme.textPrimary};
`;

const FillAvailableFlexBox = styled.div`
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
`;

const sectionDistance = spacing.r2;

const ContextWrapper = styled.div<{
  background?: ThemeColors;
}>`
  background: ${(props) =>
    props.background ? props.theme[props.background] : 'initial'};
  height: 2.5rem;
  min-height: 2.5rem;
  max-height: 2.5rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
`;

const ContextContainer = ({
  children,
  background,
  ...rest
}: {
  background?: ThemeColors;
  children: ReactElement | ReactElement[];
}) => (
  <ContextWrapper background={background}>
    <FillAvailableFlexBox {...rest}>{children}</FillAvailableFlexBox>
  </ContextWrapper>
);

const OverallSummaryContainer = styled.div<{
  noPadding?: boolean;
  hasTopMargin?: boolean;
  noBottomMargin?: boolean;
  background?: ThemeColors;
}>`
  background: ${(props) => props.theme[props.background || 'backgroundLevel2']};
  min-height: 6rem;
  padding: ${({ noPadding }) => (noPadding ? '0' : '0 1rem')};
  margin-bottom: ${({ noBottomMargin }) =>
    noBottomMargin ? '0' : sectionDistance};
  margin-top: ${({ hasTopMargin }) => (hasTopMargin ? '1rem' : '0')};
  box-sizing: border-box;
  display: flex;
  align-items: center;
`;

const OverallSummary = ({
  children,
  noPadding,
  noBottomMargin,
  hasTopMargin,
  background,
  ...rest
}: {
  children: any;
  noPadding?: boolean;
  noBottomMargin?: boolean;
  hasTopMargin?: boolean;
  background?: ThemeColors;
}) => (
  <OverallSummaryContainer
    background={background}
    noPadding={noPadding}
    noBottomMargin={noBottomMargin}
    hasTopMargin={hasTopMargin}
  >
    <FillAvailableFlexBox {...rest}>{children}</FillAvailableFlexBox>
  </OverallSummaryContainer>
);

const MainContentContainer = styled.div<{
  hasPadding?: boolean;
  hasTopMargin?: boolean;
  background?: ThemeColors;
}>`
  display: flex;
  flex: 1;
  padding: ${(props) => (props.hasPadding ? '1rem' : 'initial')};
  margin-top: ${({ hasTopMargin }) => (hasTopMargin ? '1rem' : '0')};
  background: ${(props) => props.theme[props.background || 'backgroundLevel3']};
  overflow: hidden;
`;

const MainContent = ({
  children,
  hasPadding,
  background,
  hasTopMargin,
  ...rest
}: {
  children: ReactNode;
  hasPadding?: boolean;
  hasTopMargin?: boolean;
  background?: ThemeColors;
}) => (
  <MainContentContainer
    hasPadding={hasPadding}
    hasTopMargin={hasTopMargin}
    background={background}
    {...rest}
  >
    {children}
  </MainContentContainer>
);
const AppChildrenContainer = styled.div<{
  hasPadding?: boolean;
}>`
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: ${(props) => (props.hasPadding ? '0 1rem' : 'initial')};
  width: 100%;
  box-sizing: border-box;
`;

function AppContainer({
  children,
  sidebarNavigation,
  hasPadding,
  ...rest
}: {
  children: ReactElement | ReactElement[];
  sidebarNavigation?: ReactElement;
  hasPadding?: boolean;
}) {
  return (
    <Container {...rest}>
      {sidebarNavigation}
      <AppChildrenContainer hasPadding={hasPadding}>
        {children}
      </AppChildrenContainer>
    </Container>
  );
}

AppContainer.ContextContainer = ContextContainer;
AppContainer.OverallSummary = OverallSummary;
AppContainer.MainContent = MainContent;
AppContainer.sectionDistance = sectionDistance;

export { AppContainer };