import React 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 Hidden from '@material-ui/core/Hidden';

const useStyles = makeStyles(theme => ({
    root: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'flex-end',
    },
    iconHover: {
        margin: theme.spacing(2),
        '&:hover': {
            color: red[800],
        },
    },
    icon: {
        margin: theme.spacing(1.5),
        padding: theme.spacing(1.5),
        borderRadius: '20px',
        fontSize: '1em',
        textAlign: 'center',
    },
    FacebookIcon: {
        color: theme.palette.social.facebook,
        '&:hover': {
            backgroundColor: theme.palette.social.facebook,
            color: '#fff',
        }
    },
    TwitterIcon: {
        color: theme.palette.social.twitter,
        '&:hover': {
            backgroundColor: theme.palette.social.twitter,
            color: '#fff',
        }
    },
    LinkedinIcon: {
        color: theme.palette.social.linkedin,
        '&:hover': {
            backgroundColor: theme.palette.social.linkedin,
            color: '#fff',
        }
    },
    MailIcon: {
        color: theme.palette.social.mail,
        '&:hover': {
            backgroundColor: theme.palette.social.mail,
            color: '#fff',
        }
    },
    FacebookIconMobile: {
        color: theme.palette.social.facebook,   
    },
    TwitterIconMobile: {
        color: theme.palette.social.twitter,
    },
    LinkedinIconMobile: {
        color: theme.palette.social.linkedin,
    },
    MailIconMobile: {
        color: theme.palette.social.mail,
    },
}));

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

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

    return (
        <div className={classes.root}>
            <Hidden smDown>
                <a href={"https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(props.url)} target="_blank">
                    <Icon className={clsx(classes.icon, classes.FacebookIcon, 'fab fa-facebook-f')}  />
                </a>
                <a href={"http://twitter.com/share?url=" + encodeURIComponent(props.url)} target="_blank">
                    <Icon className={clsx(classes.icon, classes.TwitterIcon, 'fab fa-twitter')} color="secondary" />
                </a>
                <a href={"https://www.linkedin.com/shareArticle?mini=true&url=" + encodeURIComponent(props.url + "&title=Talent's Tube")} target="_blank">
                    <Icon className={clsx(classes.icon, classes.LinkedinIcon, 'fab fa-linkedin-in')} color="secondary" />
                </a>
                {/* change because of https://github.com/zeit/next.js/blob/master/errors/invalid-href-passed.md */}
                <a href={"mailto:?subject=Offre d'emploi Talent's Tube&body=Regardez cette offre : " + props.url} target="_blank"s>
                    <Icon className={clsx(classes.icon, classes.MailIcon, 'fas fa-envelope')} color="secondary" />
                </a>
            </Hidden>
            <Hidden mdUp>
            <a href={"https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(props.url)} target="_blank">
                    <Icon className={clsx(classes.icon, classes.FacebookIconMobile, 'fab fa-facebook-f')}  />
                </a>
                <a href={"http://twitter.com/share?url=" + encodeURIComponent(props.url)} target="_blank">
                    <Icon className={clsx(classes.icon, classes.TwitterIconMobile, 'fab fa-twitter')} color="secondary" />
                </a>
                <a href={"https://www.linkedin.com/shareArticle?mini=true&url=" + encodeURIComponent(props.url + "&title=Talent's Tube")} target="_blank">
                    <Icon className={clsx(classes.icon, classes.LinkedinIconMobile, 'fab fa-linkedin-in')} color="secondary" />
                </a>
                {/* change because of https://github.com/zeit/next.js/blob/master/errors/invalid-href-passed.md */}
                <a href={"mailto:?subject=Offre d'emploi Talent's Tube&body=Regardez cette offre : " + props.url} target="_blank"s>
                    <Icon className={clsx(classes.icon, classes.MailIconMobile, 'fas fa-envelope')} color="secondary" />
                </a>
            </Hidden>
        </div>
    );
}