/* eslint-disable jsx-a11y/anchor-is-valid */

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Layout from "../components/templates/Layout"
import { Typography } from '@material-ui/core';
import Button from '@material-ui/core/Button';
import Router from 'next/router'
import { connect } from 'react-redux'
//const fetchEmphasisJobsRequest = lazy(() => import('../actions/ads'));
import { fetchEmphasisJobsRequest } from "../actions/ads";
//const fetchEmphasisCompaniesRequest = lazy(() => import('../actions/companies'));
import { fetchEmphasisCompaniesRequest } from "../actions/companies";
import Loader from '../components/templates/loader'
import { isEmpty } from "lodash"
import NoResult from '../components/atoms/NoResult';
// import Head from 'next/head'
import dynamic from 'next/dynamic'
import OgHead from '../components/atoms/OgHead';
import getConfig from 'next/config'
import { BreadcrumbJsonLd } from 'next-seo';
import Slider from "react-slick";
// const VideoSlider = dynamic(() => import('../components/organisms/ShortVideoHooker'), {
//   ssr: false
// });
const HorizontalScroller = dynamic(() => import('../components/organisms/HorizontalScroller'), {
  ssr: false
});

const TileCompany = dynamic(() => import('../components/organisms/TileCompany'), {
  ssr: false
});

const TileOffre = dynamic(() => import('../components/organisms/TileOffre'), {
  ssr: false
});

const Footer = dynamic(() => import('../components/organisms/Footer'), {
  ssr: false
});
const { publicRuntimeConfig } = getConfig();
const styles = theme => ({
  root: {
    position: 'relative',
    textAlign: 'center',
    paddingTop: theme.spacing(20),
    justifyContent: 'center',
  },
  primary: {
    color: theme.palette.primary.main,
  },
  container: {
    display: 'flex',
    flexDirection: 'column',
  },
  scrollerSection: {
    display: 'flex',
    flexDirection: 'column',
    paddingBottom: theme.spacing(6),
    '&>div': {
      paddingBottom: theme.spacing(3),
    },
    [theme.breakpoints.up('md')]: {
      padding: theme.spacing(2, 10),
      paddingBottom: theme.spacing(9),
    },
    [theme.breakpoints.up('lg')]: {
      padding: theme.spacing(2, 30),
      paddingBottom: theme.spacing(9),
    },
    [theme.breakpoints.up('xl')]: {
      padding: theme.spacing(2, 55),
    },
  },
  scrollerSectionOffer: {
    backgroundColor: theme.palette.secondary.main,
  },
  scrollerSectionCompany: {
    backgroundColor: theme.palette.background.grey,
  },
  scrollerSectionSlider:{
    backgroundColor: theme.palette.secondary.main,
  },
  card: {
    margin: theme.spacing(1),
    width: '96%',
    height: '100%',
    maxWidth: '640px',
    maxheight: '360px',

  },
  HorizontalScroller: {
    marginTop: theme.spacing(1),
    marginBottom: theme.spacing(4),
  },
  paper: {
    margin: theme.spacing(1),
    width: '96%',
    height: '100%',
  },
  media: {
  },
  svg: {
    width: 100,
    height: 100,
  },
  polygon: {
    fill: theme.palette.common.white,
    stroke: theme.palette.divider,
    strokeWidth: 4,
  },
  img: {
    maxWidth: '100%',

  },
  titleContainer: {
    marginTop: theme.spacing(4),
    marginBottom: theme.spacing(3),
  },
  beforeTitle: {
    fontSize: '0.8em',
    fontWeight: '300',
    textAlign: 'center',
    textTransform: 'uppercase',
    color: theme.palette.secondary.text,
  },
  title: {
    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
    fontSize: '1.5em',
    fontWeight: '600',
    textAlign: 'center',
  },
  white: {
    color: theme.palette.common.white
  },
  button: {
    textTransform: 'inherit',
    margin: theme.spacing(0, 8),
    padding: theme.spacing(1.2, 2),
    [theme.breakpoints.up('sm')]: {
      margin: 'auto',
    },
  },
  choix: {
    color:"#fff",
    position: "absolute",
    top: "0",
    bottom: "0",
    width: "100%",
    height: "100%",
    display: "flex",
    alignItems: "flex-start"
  },
  containerVideoGauche :{
    position: "relative",
    height:"100%",
    width:"50%",
    backgroundImage: 'url("/statique/images/accueil/trouver-un-job.jpg")',
   
    backgroundRepeat: 'no-repeat',
    backgroundPosition: "center",
    backgroundSize: "cover",
    backgroundBlendMode: 'darken',
    backgroundColor: 'rgba(30,35,39,0.4)',
  },
  containerVideoDroite :{
    position: "relative",
    backgroundColor:"red",
    height:"100%",
    width:"50%",
    backgroundImage: 'url("/statique/images/accueil/recruter-des-talents.jpg") ',
    
    backgroundRepeat: 'no-repeat',
    backgroundPosition: "center",
    backgroundSize: "cover",
    backgroundBlendMode: 'darken',
        backgroundColor: 'rgba(30,35,39,0.4)',
  },
  containerTitre :{
    backgroundColor:"pink",
  },
  wrap :{
    height: "75%",
    width: "100%",
    position: "relative",
  },
  headerTitre :{
    backgroundColor:"transparent",
    height: "100px",
    width: "100%",
    position: "absolute",
    top: "80px",
    textAlign:"center",
    color:"#fff",
    zIndex : "1000"
  },
  blocRecruteur:{
    backgroundColor:"#fff",
    bottom:"40px", 
    left:"60px",
    position: "absolute",
    padding:"50px",
    fontWeight: "600",
    minWidth:"40%",
    borderRadius:"5px",
  },
  blocCandidat:{
    backgroundColor:"#fff",
    bottom:"40px", 
    right:"60px",
    position: "absolute",
    padding:"50px",
    fontWeight: "600",
    minWidth:"40%",
    borderRadius:"5px",
  },
  titreAccueil:{
    fontSize:"3em",
    textAlign:"center",
    color:"#fff",
    paddingTop:"40px",
    fontWeight: "600",
    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
  },
  titreAccueil2:{
    fontSize:"2em",
    textAlign:"center",
    color:"#fff",
    paddingTop:"40px",
    fontWeight: "400",
    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
  },
  jeSuis:{
    fontSize:"1em",
    textTransform: "uppercase",
    color:"#1E2327",
    textAlign: "left",
    fontWeight: "300",
    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
    marginBottom:"1em"
  },
  action:{
    fontSize:"1.5em",
    color:"#1E2327",
    textAlign: "left",
    fontWeight: "600",
    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
    marginBottom:"1.5em"
  },
  boutonCandidat:{
    width:"100%",
  },
  boutonRecruteur:{
    width:"100%",
    color: theme.palette.secondary.main,
    backgroundColor: theme.palette.primary.important,
  },
  temoignage:{
    textAlign:"center"
  },
  lien:{
    textDecoration:'none',
    color:'#fff'
  },
  alignVertical:{
    verticalAlign:"middle !important"
  }
});
///

class Index extends React.Component {
  state = {
    emphasisJobs: [],
    emphasisCompanies: []
  }
  componentDidMount() {
    localStorage.setItem("loginRedirect", "/")
    this.props.fetchEmphasisJobsRequest({ isEmphasis: 1 })
    this.props.fetchEmphasisCompaniesRequest({ isEmphasis: 1 })
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    this.setState({
      emphasisJobs: nextProps.emphasisJobs,
      emphasisCompanies: nextProps.emphasisCompanies
    })
  }
  render() {
    const { classes } = this.props;
    const settings = {
      dots: false,
      infinite: true,
      slidesToShow: 5,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 2000
    };
    const socialShareUrl = typeof window !== 'undefined' ? window.location
            : publicRuntimeConfig.frontServerUrl ;
    const DefaultUrl = publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg"
    const imgUrl =  DefaultUrl
    return (
      <Layout>
        <OgHead seo_title="Espace candidat - Plateforme de recrutement en vidéo | Talents Tube"
                    seo_description="Talents Tube est la première plateforme réservée aux offres d'emploi vidéo, vidéo marque employeur et aux CV vidéos. Découvrez une nouvelle méthode de recrutement."
                    seo_url={socialShareUrl}
                    image={imgUrl}
                    seo_key="Recrutement, video"

        ></OgHead>
        <BreadcrumbJsonLd
      itemListElements={[
        {
          position: 1,
          name: 'Offres',
          item: 'https://www.talentstube.com/Offres',
        },
        {
          position: 2,
          name: 'Entreprises',
          item: 'https://www.talentstube.com/Offres',
        },
        {
          position: 3,
          name: 'Espace recruteur',
          item: 'https://recruteur.talentstube.com/',
        },
        {
          position: 4,
          name: "Blog sur l'emploi",
          item: 'https://blog.talentstube.com/',
        },
      ]}
    />
        <div className={classes.wrap}>
            <header className={classes.headerTitre}>
                <h1 className={classes.titreAccueil}>La rencontre d’offres d’emploi et de candidatures en vidéo</h1>
                <span className={classes.titreAccueil2}>
                Parce que vous méritez mieux que du texte !
                </span>
            </header>
            <section className={classes.choix}>
              
              <div className={classes.containerVideoGauche}>
                  
                  <div className={classes.blocCandidat}>
                      <div className={classes.jeSuis}>JE SUIS CANDIDAT</div>
                      <div className={classes.action}>Je trouve un job</div>
                      <Button
                        variant="contained"
                        color="primary"
                        onClick={() => Router.push('/Offres')}
                        className={classes.button + ' ' + classes.boutonCandidat}
                      >Découvrir les offres
                      </Button>


                  </div>
              </div>
              <div className={classes.containerVideoDroite}>
                
                <div className={classes.blocRecruteur}>
                  <div className={classes.jeSuis}>JE SUIS recruteur</div>
                  <div className={classes.action}>Je recrute des talents</div>
                  <a href='https://recruteur.talentstube.com' className={classes.lien}>
                    <Button
                        variant="contained"
                        className={classes.button + ' ' + classes.boutonRecruteur}
                      >Déposer une offre
                  </Button>
                  </a>
                </div>
              </div>
            </section>
          </div>
        <div className={classes.container}>

          {/* <VideoSlider /> */}
          
          <section className={classes.scrollerSection + ' ' + classes.scrollerSectionOffer}>
            <div
              className={classes.HorizontalScrollerOffre}
            >
              <div className={classes.titleContainer}>
                <Typography gutterBottom
                  className={classes.beforeTitle}>
                  à la une
              </Typography>
                <Typography gutterBottom component="h1"
                  className={classes.title}>
                  Les offres d'emploi en <span className={classes.primary}>vidéo</span>
                </Typography>
              </div>

              {this.state.emphasisJobs.loading ?
                (<Loader />)
                : !isEmpty(this.state.emphasisJobs.data) ? (
                    <HorizontalScroller
                      data={this.state.emphasisJobs.data}
                      className={classes.HorizontalScroller}
                      type="offre"
                    >
                      <TileOffre />
                    </HorizontalScroller>
                ) : (<NoResult text='Aucun résultat.' />)}
            </div>

            <Button
              variant="contained"
              name="Offres"
              color="primary"
              onClick={() => Router.push('/Offres')}
              className={classes.button + ' cypButtonOffers'}
            >
              Toutes les offres
          </Button>
          </section>

          <section className={classes.scrollerSection + ' ' + classes.scrollerSectionCompany}>
            <div
              className={classes.HorizontalScrollerOffre}
            >
              <div className={classes.titleContainer}>
                <Typography gutterBottom
                  className={classes.beforeTitle}>
                  à la une
              </Typography>
                <Typography gutterBottom component="h1"
                  className={classes.title}>
                  Les entreprises en <span className={classes.primary}>vidéo</span>
                </Typography>
              </div>

              {this.state.emphasisCompanies.loading ?
                (<Loader />)
                : !isEmpty(this.state.emphasisCompanies.data) ? (

                  <HorizontalScroller
                    data={this.state.emphasisCompanies.data}
                    className={classes.HorizontalScroller}
                    type="entreprise"
                  >
                    <TileCompany />
                  </HorizontalScroller>
                ) : (<NoResult text='Aucun résultat.' />)}
            </div>

            <Button

              name="Entreprises"
              variant="contained"
              color="primary"
              onClick={() => Router.push('/Entreprises')}
              className={classes.button}
            >
              Toutes les entreprises
          </Button>
          </section>

          <section className={classes.scrollerSection + ' ' + classes.scrollerSectionCompany}>
            <div
              className={classes.HorizontalScrollerOffre}
            >
              <div className={classes.titleContainer}>
                <Typography gutterBottom
                  className={classes.beforeTitle}>
                  Témoignage
              </Typography>
                <Typography gutterBottom component="h1"
                  className={classes.title}>
                  Le recrutement en <span className={classes.primary}>vidéo</span>
                </Typography>
              </div>
              <div className={classes.temoignage}>
                <iframe width="70%" height="450" src="https://www.youtube.com/embed/sKh0u7Mbdps" 
                frameborder="0" 
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                allowfullscreen>
                  
                </iframe>
              </div>    
              
            </div>

            
          </section>
          <section className={classes.scrollerSection + ' ' + classes.scrollerSectionSlider}>
          <Slider ref={slider => (this.slider = slider)} {...settings}>
          <div className={classes.alignVertical}>
            <img src="https://recruteur.talentstube.com/media/cache/profile_thumb/uploads/img/0dc350ae6a639b3671b7a262e51ad581.jpeg"></img>
          </div>
          <div className={classes.alignVertical}>
            <img src="https://recruteur.talentstube.com/media/cache/profile_thumb/uploads/img/7f039d43138fda1959959f1fe6539c27.jpeg"></img>
          </div>
          <div className={classes.alignVertical}>
          <img src="https://recruteur.talentstube.com//media/cache/profile_thumb/uploads/img/62206ab199713e2828e409f705b9ec9d.png"></img>
          </div>
          <div className={classes.alignVertical}>
          <img src="https://recruteur.talentstube.com//media/cache/profile_thumb/uploads/img/4f3dba583fea12c01a9c708772b1e0ac.jpeg"></img>
          </div>
          <div className={classes.alignVertical}>
          <img src="https://recruteur.talentstube.com//media/cache/profile_thumb/uploads/img/60ac27698d9f443a1acc4fbdebd07a9e.png"></img>
          </div>
          <div className={classes.alignVertical}>
          <img src="https://recruteur.talentstube.com//media/cache/profile_thumb/uploads/img/6f80c41422367911f0e1da5c40c3da4f.png"></img>
          </div>
          <div className={classes.alignVertical}>
          <img src="https://recruteur.talentstube.com//media/cache/profile_thumb/uploads/img/1f1a4e3f66dc6ec7ac4c650fe317762a.png"></img>
          </div>
          <div className={classes.alignVertical}>
          <img src="https://recruteur.talentstube.com//media/cache/profile_thumb/uploads/img/b91b7247132926320e15f047962300bf.png"></img>
          </div>
          <div className={classes.alignVertical}>
          <img src="https://recruteur.talentstube.com//media/cache/profile_thumb/uploads/img/be618ebff241f1755525bb942e7008e9.jpeg"></img>
          </div>
          <div className={classes.alignVertical}>
          <img src="https://recruteur.talentstube.com//media/cache/profile_thumb/uploads/img/ce3e28e13be1bd90f9028bf73828572f.jpeg"></img>
          </div>
          <div className={classes.alignVertical}>
          <img src="https://recruteur.talentstube.com//media/cache/profile_thumb/uploads/img/94c787c21c93a6b905eca6b739eedbf2.png"></img>
          </div>
          <div className={classes.alignVertical}>
          <img src="https://recruteur.talentstube.com//media/cache/profile_thumb/uploads/img/7700369aae83d9b84ac0f42a0e63277f.jpeg"></img>
          </div>
          <div className={classes.alignVertical}>
          <img src="https://recruteur.talentstube.com//media/cache/profile_thumb/uploads/img/58d59033851aa9d4d633cd895d794fcf.jpeg"></img>
          </div>
          
        </Slider>
        </section>        
          <Footer />
        </div>
      </Layout>
    );
  }
}

function mapStateToProps(state) {
  return {
    emphasisJobs: state.emphasisJobs,
    emphasisCompanies: state.emphasisCompanies
  };
}

Index.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default (connect(mapStateToProps, { fetchEmphasisJobsRequest, fetchEmphasisCompaniesRequest })(withStyles(styles)(Index)));
