
import React from 'react';
import { connect } from "react-redux";
import PropTypes from 'prop-types';
import _ from "lodash"
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import LayoutGrid from "../components/templates/LayoutGrid";
import Grid from "../components/templates/Grid"
import OffreRow from "../components/organisms/OffreRow"
import Typography from '@material-ui/core/Typography';
import { fetchJobsRequest, togglePromotedFilterRequest} from '../actions/ads'
import { AdsSelector } from '../reducers/ads'
import { TextField } from '@material-ui/core';
import Head from 'next/head'
import OgHead from '../components/atoms/OgHead';
import getConfig from 'next/config'


const styles = theme => ({
  root: {
    position: 'relative',
    textAlign: 'center',
    paddingTop: theme.spacing(20),
    justifyContent: 'center',
  },
  container: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    padding: theme.spacing(2, 0),
    '& .griddle-table-body': {
      [theme.breakpoints.up('md')]: {
        padding: theme.spacing(0, 1),
        width: '62vw',
      },
      padding: theme.spacing(0, 1),
      width: 'inherit',
    },

  },
  title: {
    fontFamily: 'Dosis',
    fontSize: '1.5em',
    fontWeight: '600',
    textAlign: 'center',
    marginTop: theme.spacing(10),
    marginBottom: theme.spacing(3),
    padding: theme.spacing(0, 8),
    [theme.breakpoints.up('sm')]: {
      marginTop: theme.spacing(14),
    },
  },
  primary: {
    color: theme.palette.primary.main,
  },
  provided: {
    color: theme.palette.secondary.important,
  },
  button: {
    textTransform: 'inherit',
    margin: theme.spacing(4, 8),
    padding: theme.spacing(1.2, 1),
    border: '2px solid',
    '&:hover': {
      border: '2px solid',
    },
  },
  buttonDefault: {
    color: theme.palette.primary.main,
    borderColor: theme.palette.primary.main,
  },
  buttonProvided: {
    color: theme.palette.secondary.important,
    borderColor: theme.palette.secondary.important,
  },
});

class Offres extends React.Component {

  constructor(props) {
    super(props);
    
  }
  voirOffre(){
    this.props.togglePromotedFilterRequest()
    sessionStorage.setItem('offres_currentPage',1);
  }

  static getInitialProps({ query }) {
    const { init } = query
    //this.props.promotedFilter =init
    return { init };
  }

  render() {
    
    const { classes } = this.props;
    const countColor = this.props.promotedFilter ? classes.provided : classes.primary;
    const btnClass = this.props.promotedFilter ? classes.buttonDefault : classes.buttonProvided;
    const { publicRuntimeConfig } = getConfig();
    const socialShareUrl = typeof window !== 'undefined' ? window.location
            : publicRuntimeConfig.frontServerUrl + `/Offres`;
    const DefaultUrl = publicRuntimeConfig.symphonyUrl + "/img/default_picture_svg"
    const imgUrl = DefaultUrl ;
    return (
      <LayoutGrid backLink="/">
        <OgHead seo_title="Vidéos d'offres d'emploi, CDI, CDD, alternance et Stage | Talents Tube"
                    seo_description="Vidéos d'offres d'emploi, CDI, CDD, alternance, stage et apprentissage d'entreprises qui recrutent sur Talents Tube."
                    seo_url={socialShareUrl}
                    image={imgUrl}
                    seo_key="Recrutement, video"
                    
                ></OgHead>

        <Typography gutterBottom component="h1"
          className={classes.title}>
          <span className={countColor}>{this.props.recordCount}</span> offres d'emploi vidéo {this.props.promotedFilter ? 'pourvues' : 'en cours'}
        </Typography>
        <div className={classes.container}>
          <Grid CustomRowComponent={OffreRow}
            dataFetcher={this.props.fetchJobsRequest}
            data={this.props.ads}
            currentPage={this.props.currentPage}
            recordCount={this.props.recordCount}
            promoted={this.props.promotedFilter}
            loading={this.props.loading}
            type="offres"
            placeholder={"Rechercher un job"}
          />
          <Button
          name="Rechercher un job"
            variant="outlined"
            onClick={() => this.voirOffre()
            }
            className={classes.button + ' ' + btnClass}>
            {this.props.promotedFilter? 'Voir les offres en cours' : 'Voir les offres pourvues'}
          </Button>
        </div>
      </LayoutGrid>

    );
  }
}

Offres.defaultProps = {
  currentPage: 1,
}

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

function mapStateToProps(state) {

  return {
    promotedFilter : state.ads.promotedFilter,
    loading: state.ads.loading,
    ads: Object.keys(state.ads).length !== 0 && AdsSelector(state),
    currentPage: _.toNumber(!!state.ads.meta ? _.ceil((state.ads.meta.offset + 1) / state.ads.meta.limit) : 1),
    recordCount: _.toNumber(!!state.ads.meta && state.ads.meta.total_items),
  };
}

export default withStyles(styles)(connect(mapStateToProps, { fetchJobsRequest, togglePromotedFilterRequest })(Offres))
