import { t } from 'ttag';
import { makeStyles } from '@material-ui/core/styles';
import { Dialog, DialogTitle, DialogContent } from '@material-ui/core';
import getConfig from 'next/config';
import Facebook from './images/facebook.svg';
import Twitter from './images/twitter.svg';
import Github from './images/github.svg';

const useStyles = makeStyles({
  title: {
    textAlign: 'center',
  },
  content: {
    padding: '1.5rem 3rem',
  },
});

const useProviderStyles = makeStyles(theme => ({
  root: {
    borderRadius: 30,
    display: 'flex',
    alignItems: 'center',
    marginTop: 6,
    background: ({ color }) => color,
    '& > div': {
      position: 'absolute',
      height: 32,
      width: 32,
      display: 'flex',
      justifyContent: 'center',
      marginLeft: 10,
    },
    '& a': {
      flex: '1 1 auto',
      padding: '1rem 5rem',
      color: theme.palette.common.white,
      textTransform: 'uppercase',
      textAlign: 'center',
      textDecoration: 'none',
      letterSpacing: 0.75,
      fontWeight: 500,
    },
  },
}));

const {
  publicRuntimeConfig: { PUBLIC_API_URL },
} = getConfig();

const ProviderLink = ({
  provider,
  logo,
  color,
  children,
  redirectPath = '',
}) => {
  const redirectUrl =
    redirectPath ||
    location.href.replace(new RegExp(`^${location.origin}`), '');

  const urlFor = provider =>
    `${PUBLIC_API_URL}/login/${provider}?redirect=${redirectUrl}`;
  const classes = useProviderStyles({ color });

  return (
    <div className={classes.root}>
      <div className={classes.logoWrapper}>
        <img src={logo} alt={provider} />
      </div>
      <a href={urlFor(provider)}>{children}</a>
    </div>
  );
};

function LoginModal({ onClose, redirectPath }) {
  const classes = useStyles();

  return (
    <Dialog open onClose={onClose}>
      <DialogTitle className={classes.title}>{t`Login / Signup`}</DialogTitle>
      <DialogContent className={classes.content}>
        <ProviderLink
          provider="facebook"
          logo={Facebook}
          color="#1976D2"
          redirectPath={redirectPath}
        >
          Facebook
        </ProviderLink>
        <ProviderLink
          provider="twitter"
          logo={Twitter}
          color="#03A9F4"
          redirectPath={redirectPath}
        >
          Twitter
        </ProviderLink>
        <ProviderLink
          provider="github"
          logo={Github}
          color="#2B414D"
          redirectPath={redirectPath}
        >
          Github
        </ProviderLink>
      </DialogContent>
    </Dialog>
  );
}

export default LoginModal;

@@ -74,16 +74,71 @@
 tyles';%0A
+import Typography from '@material-ui/core/Typography';%0A
 import %7B
@@ -234,24 +234,88 @@
 xt/config';%0A
+import %7B LICENSE_URL, EDITOR_REFERENCE %7D from 'constants/urls';%0A
 import Faceb
@@ -538,16 +538,18 @@
 g: '
-1.5
+0 2
 rem 
-3
+1.5
 rem'
@@ -702,14 +702,17 @@
 rgin
-Top: 6
+Bottom: 8
 ,%0A  
@@ -1914,16 +1914,30 @@
 log open
+ maxWidth=%22xs%22
  onClose
@@ -2649,24 +2649,267 @@
 oviderLink%3E%0A
+        %3CTypography variant=%22body2%22 style=%7B%7B marginTop: 16 %7D%7D%3E%0A          %E7%99%BB%E5%85%A5%E6%88%96%E8%A8%BB%E5%86%8A%E5%8D%B3%E8%A1%A8%E7%A4%BA%E6%82%A8%E5%90%8C%E6%84%8F%3Ca href=%7BEDITOR_REFERENCE%7D%3E%E4%BD%BF%E7%94%A8%E8%80%85%E6%A2%9D%E6%AC%BE%3C/a%3E%EF%BC%8C%E4%BB%A5%0A          Cofacts %E7%A4%BE%E7%BE%A4%E7%9A%84%E5%90%8D%E7%BE%A9%EF%BC%8C%E5%B0%87%E6%82%A8%E5%9C%A8%E6%9C%AC%E7%B6%B2%E7%AB%99%E8%BC%B8%E5%85%A5%E7%9A%84%E5%85%A7%E5%AE%B9%E4%BB%A5 CC BY-SA 4.0 %E6%A2%9D%E6%AC%BE%E9%87%8B%E5%87%BA%E7%82%BA%0A          %3Ca href=%7BLICENSE_URL%7D%3E%E9%96%8B%E6%94%BE%E8%B3%87%E6%96%99%3C/a%3E%E3%80%82%0A        %3C/Typography%3E%0A
       %3C/Dial

Add user consent to LoginModal