import Box from '~/src/components/Box';
import Clickable from '~/src/components/Clickable';
import LogoSongwhip from '~/src/components/Logos/LogoSongwhip';
import Page from '~/src/components/Page';
import LegalText from '~/src/components/PageFooter/LegalText';
import { PAGE_HEADER_HEIGHT } from '~/src/components/PageHeader';
import PageMetadata from '~/src/components/PageMetadata';
import SocialButtons from '~/src/components/SocialButtons';
import Text from '~/src/components/Text';
import { useAppRouter } from '~/src/lib/router2';

const TITLE = `Scheduled maintenance`;
const HEADING = `We’ll be back soon`;

const MESSAGE = `Sorry for the inconvenience but we’re performing some maintenance
at the moment. If you need to you can always contact us, otherwise
we’ll be back online shortly!`;

interface MaintenancePageProps {
  title?: string;
  heading?: string;
  message?: string;
}

const MaintenancePage = ({
  title = TITLE,
  heading = HEADING,
  message = MESSAGE,
}: MaintenancePageProps) => {
  return (
    <>
      <PageMetadata title={title} />
      <Page withGradient contentStyle={{ height: '100%' }}>
        <Box height={'100%'} padding="0 2rem" flexColumn flexGrow isCentered>
          <Box
            height={PAGE_HEADER_HEIGHT}
            style={{ flex: 'none' }}
            centerContent
          >
            <Clickable href="/" title="Home" isInline>
              <LogoSongwhip size="2.4rem" />
            </Clickable>
          </Box>

          <Box flexColumn flexGrow centerContent>
            {heading && (
              <Text size="12vw" maxSize="7rem" bold centered>
                {heading}
              </Text>
            )}
            {message && (
              <Text
                maxWidth={660}
                margin="4rem 0 0"
                lineHeight="1.5em"
                centered
              >
                {message}
              </Text>
            )}
            <Box margin="4rem 0 0" flexColumn centerContent>
              <Text margin="0 0 1em" letterSpacing={0.025} noWrap>
                Reach out to chat
              </Text>

              <SocialButtons iconMargin=".6rem" iconSize="4rem" centerContent />
            </Box>
          </Box>

          <LegalText margin="1rem 0" />
        </Box>
      </Page>
    </>
  );
};

const MaintenancePageWithQueryParams = () => {
  const { title, heading, message } = useAppRouter().getQuery();

  return <MaintenancePage title={title} heading={heading} message={message} />;
};

export default MaintenancePageWithQueryParams;