
import React from 'react';
import PropTypes from 'prop-types';
import getConfig from 'next/config'
import { withStyles } from '@material-ui/core/styles';
import _ from "lodash"
import Grid from "../components/templates/Grid"
import LayoutGrid from "../components/templates/LayoutGrid"
import { Typography } from '@material-ui/core';
import CompanyRow from "../components/organisms/CompanyRow"
import { fetchCompaniesRequest } from '../actions/companies'
import { CompaniesSelector } from '../reducers/companies'
import { connect } from "react-redux";
import Head from 'next/head'
import OgHead from '../components/atoms/OgHead';

const styles = theme => ({
  root: {
    position: 'relative',
    textAlign: 'center',
    paddingTop: theme.spacing(20),
    justifyContent: 'center',
  },
  container: {
    display: 'flex',
    flexDirection: 'column',
    '& > div': {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    },
    '& > div > div:nth-child(2)': {
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      width: '100%',
    },
    '& .griddle-table-body': {
      [theme.breakpoints.up('md')]: {
        padding: theme.spacing(0, 1),
        width: '65vw',
      },
      padding: theme.spacing(0, 1),
    },
  },
  title: {
    fontFamily: 'Dosis',
    fontSize: '1.5em',
    fontWeight: '600',
    textAlign: 'center',
    marginTop: theme.spacing(10),
    marginBottom: theme.spacing(3),
    padding: theme.spacing(0, 5),
    [theme.breakpoints.up('sm')]: {
      marginTop: theme.spacing(14),
    },
  },
  primary: {
    color: theme.palette.primary.main,
  },

});

class Entreprises extends React.Component {
  componentDidMount() {    
    localStorage.setItem('loginRedirect', window.location.pathname)
    console.log("Redirect"+window.location.pathname)
  }
  render() {
    const { classes } = this.props;
    const { publicRuntimeConfig } = getConfig();
    const socialShareUrl = typeof window !== 'undefined' ? window.location
            : publicRuntimeConfig.frontServerUrl + `/Entreprises`;
    const DefaultUrl = publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg"
    const imgUrl = DefaultUrl ;
    return (
      <LayoutGrid backLink="/">
        {/* <Head>
          <title key="title">Entreprises qui recrutent – Talents Tube</title>
          <meta name="description" content="Les entreprises en vidéo." />
          
          <meta name="twitter:card" content="summary"/>
          <meta name="twitter:site" content="@TalentsTube"/>
          <meta name="twitter:title" content="Les entreprises qui recrutent en vidéo | TalentsTube"/>
          <meta name="twitter:description" content="Découvrez les entreprises qui recrutent en vidéo, elles dévoilent leurs marques employeur et leurs offres d'emploi en vidéo. Postulez rapidement à l'offre qui vous convient."/>
          <meta name="twitter:image" content=""/>

          
          <meta property="og:title" content="Les entreprises qui recrutent en vidéo | TalentsTube"/>
          <meta property="og:type" content="article"/>
          <meta property="og:image" content=""/>
          <meta property="og:description"
                content="Découvrez les entreprises qui recrutent en vidéo, elles dévoilent leurs marques employeur et leurs offres d'emploi en vidéo. Postulez rapidement à l'offre qui vous convient."/>
          <meta property="og:site_name" content="Talents Tube"/>
          <meta property="og:url"
                content=""/>
         
        </Head> */}
         <OgHead seo_title="Vidéos marque employeur d'entreprises qui recrutent | Talents Tube"
                    seo_description="Vidéos marque employeur d'entreprises qui recrutent, découvrez leurs offres d'emploi en vidéo. Postulez simplement en vidéo à l'offre de votre choix."
                    seo_url={socialShareUrl}
                    image={imgUrl}
                    seo_key="Recrutement, video"
                    
                ></OgHead>
        <Typography gutterBottom component="h1"
          className={classes.title}>
          Les entreprises en <span className={classes.primary}>vidéo</span>
        </Typography>
        <div className={classes.container}>
          <Grid CustomRowComponent={CompanyRow}
            dataFetcher={this.props.fetchCompaniesRequest}
            data={this.props.companies}
            currentPage={this.props.currentPage}
            recordCount={this.props.recordCount}
            loading={this.props.loading}
            type="entreprises"
            limit={12}
            placeholder={"Rechercher une entreprise"}
          />
        </div>
      </LayoutGrid>
    );
  }

}
Entreprises.defaultProps = {
  currentPage: 1,
}
Entreprises.propTypes = {
  classes: PropTypes.object.isRequired,
};

function mapStateToProps(state) {
  return {
    loading: state.companies.loading,
    companies: state.companies.data && Object.keys(state.companies.data).length !== 0 && CompaniesSelector(state),
    //   //companies: state.companies.data,
    currentPage: _.toNumber(!!state.companies.meta && _.ceil((state.companies.meta.offset + 1) / state.companies.meta.limit)),
    recordCount: _.toNumber(!!state.companies.meta && state.companies.meta.total_items)
  };
}
export default withStyles(styles)(connect(mapStateToProps, { fetchCompaniesRequest })(Entreprises));
