// @flow
import * as React from 'react';
import styled from 'styled-components';
import Button from './Button';
import { signin } from '../../../shared/utils/routeHelpers';
import Flex from '../../../shared/components/Flex';
import Notice from '../../../shared/components/Notice';
import GoogleLogo from '../../../shared/components/GoogleLogo';
import SlackLogo from '../../../shared/components/SlackLogo';
import breakpoint from 'styled-components-breakpoint';

type Props = {
  lastSignedIn?: string,
  googleSigninEnabled: boolean,
  slackSigninEnabled: boolean,
  guestSigninEnabled?: boolean,
};

const SigninButtons = ({
  lastSignedIn,
  slackSigninEnabled,
  googleSigninEnabled,
  guestSigninEnabled,
}: Props) => {
  return (
    <Wrapper>
      {!slackSigninEnabled &&
        !googleSigninEnabled && (
          <Notice>
            Neither Slack or Google sign in is enabled. You must configure at
            least one authentication method to sign in to Outline.
          </Notice>
        )}
      {slackSigninEnabled && (
        <Column column>
          <Button href={signin('slack')}>
            <SlackLogo />
            <Spacer>Sign In with Slack</Spacer>
          </Button>
          <LastLogin>
            {lastSignedIn === 'slack' && 'You signed in with Slack previously'}
          </LastLogin>
        </Column>
      )}
      {googleSigninEnabled && (
        <Column column>
          <Button href={signin('google')}>
            <GoogleLogo />
            <Spacer>Sign In with Google</Spacer>
          </Button>
          <LastLogin>
            {lastSignedIn === 'google' &&
              'You signed in with Google previously'}
          </LastLogin>
        </Column>
      )}
    </Wrapper>
  );
};

const Column = styled(Flex)`
  text-align: center;

  ${breakpoint('tablet')`
    &:first-child {
      margin-right: 8px;
    }
  `};
`;

const Wrapper = styled(Flex)`
  display: block;
  justify-content: center;
  margin-top: 16px;

  ${breakpoint('tablet')`
    display: flex;
    justify-content: flex-start;
    margin-top: 0;
  `};
`;

const Spacer = styled.span`
  padding-left: 10px;
`;

const LastLogin = styled.p`
  font-size: 13px;
  font-weight: 500;
  color: rgba(20, 23, 26, 0.5);
  padding-top: 4px;
`;

export default SigninButtons;