import React, { Fragment } from 'react';
import Link from 'next/link';
import clsx from 'clsx';
import { loadCSS } from 'fg-loadcss';
import { makeStyles } from '@material-ui/core/styles';
import { red } from '@material-ui/core/colors';
import Icon from '@material-ui/core/Icon';
import Button from '@material-ui/core/Button';
import ButtonGroup from '@material-ui/core/ButtonGroup';

const useStyles = makeStyles(theme => ({
    icon: {
        fontSize: '1em',
    },
    externalButton: {
        '& .MuiButtonGroup-groupedContained': {
            border: '0',
        },
        margin: theme.spacing(1,0),
        margin: theme.spacing(1,1.2),
        width: 'auto',
        [theme.breakpoints.up('sm')]: {
            minWidth: '20vw',
            width: '50%',
            marginLeft: 'auto',
            marginRight: 'auto',
        },
        [theme.breakpoints.up('lg')]: {
            width: '45%',
        },
    },
    linkedinButton: {
        backgroundColor: theme.palette.authSocial.linkedin,
        padding: theme.spacing(1),
        '&:hover': {
            backgroundColor: theme.palette.authSocial.linkedin,
        }
    },
    facebookButton: {
        backgroundColor: theme.palette.authSocial.facebook,
        padding: theme.spacing(1),
        '&:hover': {
            backgroundColor: theme.palette.authSocial.facebook,
        }
    },
    linkedinIconButton: {
        backgroundColor: theme.palette.authSocial.linkedinDark,
        color: theme.palette.authSocial.linkedinDark,
        border: 0,
    },
    facebookIconButton: {
        backgroundColor: theme.palette.authSocial.facebookDark,
        color: theme.palette.authSocial.facebookDark,
        border: 0,
    },  
    textButton: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'flex-start',
        width: '100%',
        fontWeight: '400',
        color: theme.palette.secondary.main,
        textTransform: 'inherit',
        [theme.breakpoints.up('sm')]: {
            minWidth: '15vw',
        },
    },
}));

export default function SocialButtonsAuth(props) {
    const classes = useStyles();

    React.useEffect(() => {
        loadCSS(
            'https://use.fontawesome.com/releases/v5.1.0/css/all.css',
            document.querySelector('#font-awesome-css'),
        );
    }, []);

    return (
        <Fragment>
            <ButtonGroup variant="contained" onClick={props.linkedInAuth} className={classes.externalButton}>
                <Button className={classes.linkedinIconButton}>
                    <Icon className={clsx(classes.icon, 'fab fa-linkedin-in')} color="secondary" />
                </Button>

                <Button className={classes.textButton +' '+ classes.linkedinButton+ ' cypLinkedInConnexion'} >
                    Connexion avec Linkedin
                </Button>
            </ButtonGroup>

            <ButtonGroup variant="contained" onClick={props.facebookAuth} className={classes.externalButton}>
                <Button className={classes.facebookIconButton}>
                    <Icon className={clsx(classes.icon, 'fab fa-facebook-f')} color="secondary" />
                </Button>

                <Button className={classes.textButton +' '+ classes.facebookButton} >
                    Connexion avec Facebook
                </Button>
            </ButtonGroup>
        </Fragment>
    );
}