import {useEffect} from 'react';
import styled from '@emotion/styled';

import Link from 'sentry/components/links/link';
import Panel from 'sentry/components/panels/panel';
import {IconSentry} from 'sentry/icons';
import {space} from 'sentry/styles/space';

const BODY_CLASSES = ['narrow'];

function Layout({children}) {
  useEffect(() => {
    document.body.classList.add(...BODY_CLASSES);
    return () => document.body.classList.remove(...BODY_CLASSES);
  }, []);

  return (
    <div className="app">
      <AuthContainer>
        <div className="pattern-bg" />
        <AuthPanel>
          <AuthSidebar>
            <SentryButton />
          </AuthSidebar>
          <div>{children}</div>
        </AuthPanel>
      </AuthContainer>
    </div>
  );
}

const AuthContainer = styled('div')`
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 5vh;
`;

const AuthPanel = styled(Panel)`
  min-width: 550px;
  display: inline-grid;
  grid-template-columns: 60px 1fr;
`;

const AuthSidebar = styled('div')`
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: ${space(3)};
  border-radius: ${p => p.theme.borderRadius} 0 0 ${p => p.theme.borderRadius};
  margin: -1px;
  margin-right: 0;
  background: #564f64;
  background-image: linear-gradient(
    -180deg,
    rgba(52, 44, 62, 0) 0%,
    rgba(52, 44, 62, 0.5) 100%
  );
`;

const SentryButton = styled(
  (p: Omit<React.ComponentPropsWithoutRef<typeof Link>, 'to'>) => (
    <Link to="/" {...p}>
      <IconSentry size="lg" />
    </Link>
  )
)`
  color: #fff;

  &:hover,
  &:focus {
    color: #fff;
  }
`;

export default Layout;