GitFOSS

// 1st-party
import { removeCommentsAndSpacing } from "@ethicdevs/react-monolith";
// 3rd-party
import React, { FC } from "react";
import styled, { css } from "styled-components";
// app
import type { CommonViewProps, WithThemeSchemeProp } from "../types";
import { NamedColors } from "../utils/style";
import { PageHeader } from "./PageHeader";
// app islands
import InstantRouterIndicator from "../islands/InstantRouterIndicator";

interface LayoutProps extends CommonViewProps {
  foo?: boolean;
}

const BRANDLINE_HEIGHT = 4;
const HEADER_HEIGHT = 72;

export const Layout: FC<LayoutProps & WithThemeSchemeProp> = (commonProps) => {
  const { children, themeScheme } = commonProps;

  const sharedProps = {
    themeScheme,
  };

  return (
    <>
      <style
        dangerouslySetInnerHTML={{
          __html: removeCommentsAndSpacing(`
            html,
            body {
              margin: 0;
              padding: 0;
              font-family: sans-serif;
              font-size: 16px;
              background-color: ${NamedColors.BRAND_LINE[themeScheme]};
            }
            html {
              /* so anchor are not hidden behind sticky header */
              scroll-padding-top: ${HEADER_HEIGHT + 16}px;
            }
            body {
              overflow-x: hidden;
              overflow-y: scroll;
            }
            * {
              box-sizing: border-box;
            }
            a {
              color: ${NamedColors.TEXT_LINK[themeScheme]};
            }
            a:active {
              opacity: 0.87;
            }
            a > * {
              pointer-events: none;
            }
          `),
        }}
      />
      <StyledLayoutWrapper {...sharedProps}>
        <div data-islandid={`${InstantRouterIndicator.name}$$0`}>
          <InstantRouterIndicator />
        </div>
        <StyledPageHeaderWrapper {...sharedProps}>
          <PageHeader commonProps={commonProps} themeScheme={themeScheme} />
        </StyledPageHeaderWrapper>
        <StyledPageWrapper>
          <StyledChildrenWrapper {...sharedProps}>
            {children}
          </StyledChildrenWrapper>
        </StyledPageWrapper>
      </StyledLayoutWrapper>
    </>
  );
};

const StyledLayoutWrapper = styled.div<WithThemeSchemeProp>`
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;

  min-height: 100vh;
  min-width: 100%;
  max-width: 100%;

  ${({ themeScheme }) => css`
    background-color: ${NamedColors.BACKGROUND[themeScheme]};
    color: ${NamedColors.TEXT_DEFAULT[themeScheme]};
  `};
`;

const StyledPageHeaderWrapper = styled.div<WithThemeSchemeProp>`
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;

  width: 100%;
  min-height: ${HEADER_HEIGHT}px;
  height: ${HEADER_HEIGHT}px;
  max-height: ${HEADER_HEIGHT}px;

  position: sticky;
  top: 0;
  z-index: 11000;

  gap: 20px;
  padding: 0 20px;

  ${({ themeScheme }) => css`
    background-color: ${NamedColors.HEADER[themeScheme]};
    border-bottom: 1px solid ${NamedColors.BORDER_DEFAULT[themeScheme]};

    & > a > h1 {
      color: ${NamedColors.TEXT_DEFAULT[themeScheme]};
      margin: 0;
      margin-left: 16px;
    }
  `};

  & > a {
    text-decoration: unset;

    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
  }
`;

const StyledPageWrapper = styled.div`
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: stretch;

  position: relative;

  flex: 1;
  width: 100%;
  min-height: calc(100% - ${BRANDLINE_HEIGHT + HEADER_HEIGHT}px);
`;

const StyledChildrenWrapper = styled.div`
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;

  flex: 1;
  width: 100%;
`;