/* 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';

// 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,
  },
  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',
    },
  },
});

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 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.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>

          <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)));
