import Link from 'next/link'
import { withStyles } from '@material-ui/core/styles'
import { Typography } from '@material-ui/core';
import { Fragment } from 'react';
import NewsLetterRegistration from './NewsLetterRegistration'
import dynamic from 'next/dynamic'
import Button from '@material-ui/core/Button'
import getConfig from 'next/config'
const PWAInstallSnack = dynamic(() => import('./PWAInstallSnack'), {
    ssr: false
});
const { publicRuntimeConfig } = getConfig();

const styles = theme => ({
    root: {
        display: 'flex',
        flexDirection: 'column',
        backgroundColor: theme.palette.primary.main,
        [theme.breakpoints.up('md')]: {
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'flex-start',
            justifyContent: 'space-around',
            backgroundColor: theme.palette.primary.main,
            padding: theme.spacing(10, 18),
        },
        '& a': {
            textDecoration: 'none',
        },
    },
    container: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'flex-start',
        padding: theme.spacing(0, 5),
        paddingBottom: theme.spacing(3.5),
        '&:first-child': {
            paddingTop: theme.spacing(4),
        },
        [theme.breakpoints.up('md')]: {
            padding: 0,
            '&:first-child': {
                paddingTop: 0,
            },
        },

    },
    containerRegion: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        backgroundColor: theme.palette.secondary.main,
        padding: theme.spacing(3),
        [theme.breakpoints.up('md')]: {
            padding: theme.spacing(8, 0),
        },

    },
    titleContainer: {
        color: theme.palette.primary.darkMain,
        fontSize: '1.5em',
        fontFamily: 'Dosis',
        fontWeight: '600',
        [theme.breakpoints.up('md')]: {
            fontSize: '1.2em',
            paddingBottom: theme.spacing(2),
        },
    },
    textContainer: {
        fontWeight: '300',
        fontSize: '0.9em',
        [theme.breakpoints.up('md')]: {
            fontWeight: '300',
            fontSize: '0.8em',
        },
    },
    textContainerRegion: {
        fontWeight: '300',
        fontSize: '0.9em',
        color: theme.palette.primary.dark,
    },
    footerLogo: {
        width: '15vw',
        [theme.breakpoints.up('md')]: {
            width: '4vw',
        },
    },
    footerLogoTT: {
        width: '70%',
        [theme.breakpoints.up('md')]: {
            paddingBottom: theme.spacing(1),
            width: '100%'
        },
    },
    containerReactApp: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'space-between',
        height: 'auto',
        paddingTop: theme.spacing(4),
        backgroundColor: theme.palette.primary.main,
        [theme.breakpoints.down('xs')]: {
            height: '100vh',
        },
        [theme.breakpoints.up('md')]: {
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-around',
            height: '35vh',
            padding: theme.spacing(6, 1),
            position: 'relative',
        },
    },
    titleReactApp: {
        fontFamily: 'Dosis',
        fontSize: '1.5em',
        fontWeight: '600',
        paddingTop: theme.spacing(4),
        paddingLeft: theme.spacing(4),
        paddingRight: theme.spacing(4),
        [theme.breakpoints.up('md')]: {
            order: 1,
            width: '20%',
            textAlign: 'left',
        },
    },
    buttonReactApp: {
        textTransform: 'inherit',
        margin: theme.spacing(0, 8),
        padding: theme.spacing(1.2, 2),
        [theme.breakpoints.up('md')]: {
            order: 3,
            margin: 'inherit',
            marginRight: '5vw',
        },
    },
    imageReactApp: {
        width: '100%',
        [theme.breakpoints.up('sm')]: {
            width: 'auto',
        },
        [theme.breakpoints.up('md')]: {
            width: '25%',
            order: 2,
            position: 'absolute',
            bottom: 0,
        },
    },
    containerNewsletter: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: theme.spacing(6, 4),
    },
    version:{
        marginTop: '15px',
        fontSize: '0.7em',
        fontWeight: '300',
    }

});

function Footer(props) {
    const { classes } = props;
    return (
        <div>
            <PWAInstallSnack >
                {({ initInstall }) =>
                    <section
                        className={classes.containerReactApp}
                    >
                        <Typography
                            gutterBottom
                            color="secondary"
                            align="center"
                            component="h3"
                            className={classes.titleReactApp}
                        >
                            Installez l'application Talents Tube pour suivre vos candidatures
                        </Typography>
                        <Button
                            aria-label='install'
                            variant="outlined"
                            color="secondary"
                            onClick={initInstall}
                            className={classes.buttonReactApp}
                        >
                            Installer l'application
                        </Button>
                        <img alt="télécharger-pwa" src='/static/images/newsletter/application.png' className={classes.imageReactApp} />
                    </section>
                }
            </PWAInstallSnack>

            <section className={classes.containerNewsletter}>
                <NewsLetterRegistration />
            </section>

            <div className={classes.root}>
                <section className={classes.container}>
                    <img alt="talents-tube" src='/static/images/logos/TalentsTube_logo-blanc.svg' className={classes.footerLogoTT} />
                    <Link href="/Offres"  >
                        <a>
                            <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
                                Offre d'emploi
                            </Typography>
                        </a>
                    </Link>
                    <Link href="/Entreprises"  >
                        <a>
                            <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
                                Entreprises
                            </Typography>
                        </a>
                    </Link>
                    <Link href="/Help"  >
                        <a>
                            <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
                                Comment ça marche ?
                            </Typography>
                        </a>
                    </Link>
                    <a href="https://blog.talentstube.com" target="_blank">
                        <Typography gutterBottom color="secondary" component="p" className={classes.textContainer} 
                                    >
                            Blog
                        </Typography>
                    </a>
                </section>
                <section className={classes.container}>
                    <Typography color="secondary" component="p" className={classes.titleContainer}>
                        Informations
                </Typography>

                    <Link href="/Cgu"  >
                        <a>
                            <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
                                CGU
                            </Typography>
                        </a>
                    </Link>

                    <Link href="/MentionsLegales"  >
                        <a>
                            <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
                                Mentions légales
                            </Typography>
                        </a>
                    </Link>
                    <Link href="/Confidentialite"  >
                        <a>
                            <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
                                Politique de confidentialité et Protection <br />des données
                            </Typography>
                        </a>
                    </Link>
                    <Link href="" >
                        <a href="https://blog.talentstube.com/contact" target="_blank">
                            <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
                                Contact
                            </Typography>
                        </a>
                    </Link>
                </section>
                <section className={classes.container}>
                    <Typography color="secondary" component="p" className={classes.titleContainer}>
                        Rencontrons-nous
                </Typography>
                    <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
                        3, rue Louis de Broglie
                </Typography>
                    <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
                        56 000 Vannes
                </Typography>
                    <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
                    <a href="tel:+33230050631"  >02.30.05.06.31 </a> 
                </Typography>
                    {/* <Typography gutterBottom color="secondary" component="p" className={classes.textContainer}>
                        contact@talentstube.com
                </Typography> */}
                </section>

            </div>
            <section className={classes.containerRegion}>
                <Typography gutterBottom component="p" className={classes.textContainerRegion} align="center" >
                    Entreprise soutenue par
                </Typography>
                <a href="https://www.bretagne.bzh/" target="_blank" className={classes.darkMenuItem} rel="noopener">
                    <img alt="Région Bretagne" src='/static/images/logos/Logo-region.svg' className={classes.footerLogo} />
                </a>
                <Typography   className={classes.version} align="center" >
                {publicRuntimeConfig.version}
                </Typography>
            </section>
        </div>
    );
}

export default withStyles(styles)(Footer)