import React from 'react';
import PropTypes from "prop-types";
import Router from 'next/router'
import getConfig from 'next/config'
import { withStyles } from '@material-ui/core/styles';
import Avatar from '@material-ui/core/Avatar';
import Card from '@material-ui/core/Card';
import Chip from '@material-ui/core/Chip';
import CardContent from '@material-ui/core/CardContent';
import CardHeader from '@material-ui/core/CardHeader';
import CardMedia from '@material-ui/core/CardMedia';
import Typography from '@material-ui/core/Typography';
import { Button } from '@material-ui/core';

const styles = theme => ({
  card: {
    display: 'flex',
    position: 'relative',
    height: '50vh',
    width: '100%',
    
    [theme.breakpoints.up('md')]: {
      width : '30%',
    },
    [theme.breakpoints.down('md')]: {
      width : '40%',
    },
    [theme.breakpoints.down('xs')]: {
      width : '100%',
    },

    margin: '1vh 2vh 1vh 2vh',
    [theme.breakpoints.up('sm')]: {
      margin: '1vh 0 1vh 0',
    },
    borderRadius: 0
  },
  details_container: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    padding: '8vh 0 0 0',
  },
  company_title: {
    fontSize: '1em',
    fontWeight: 'normal',
    textTransform: 'uppercase',
  },
  content: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    flexWrap: 'wrap',
    width: '100%',
    padding: 0,
  },
  cover: {
    width: '100%',
    height: '50%',
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
  },
  logo_container: {
    display: 'flex',
    alignItems: 'center',
    width: 100,
    height: 100,
    position: 'absolute',
    left: '50%',
    top: '50%',
    transform: 'translate(-50%, -66%)',
    backgroundColor: 'white',
    boxShadow: '0 8px 6px -6px grey',
  },
  logo: {
    width: '100%',
    height: 'auto',
    objectfit: 'contain',
    borderRadius: 0,
  },
  chip: {
    margin: '0 1vh 0 1vh',
  }

});

const { publicRuntimeConfig } = getConfig()
class OffreRowComponent extends React.Component {

  render() {

    const { classes, theme, rowData } = this.props;

    const imgUrl = (rowData.video.thumbnails[0] && rowData.video.thumbnails[0].sizes[4]) ? rowData.video.thumbnails[0].sizes[4].link : publicRuntimeConfig.adListDefaultUrl
    const logoUrl = publicRuntimeConfig.logoRootUrl + rowData.company.logo
    //rowData._embedded.company.business_name
    return (

      <Card className={classes.card} onClick={() => Router.push(`/Offre?id=${rowData.id}`)}>
        <CardContent className={classes.content}>
          <CardMedia
            className={classes.cover}
            image={imgUrl}
            title={rowData.title}
          />

          <div className={classes.logo_container}>
            <Avatar className={classes.logo} src={logoUrl} />
          </div>

          <div className={classes.details_container}>
            <Typography
              gutterBottom
              variant="headline"
              variant="h6"
              component="h4"
              align="center"
              className={classes.company_title}>
              {rowData.company.business_name}
            </Typography>
            <Typography
              gutterBottom
              variant="headline"
              variant="h6"
              component="h3"
              align="center"
              className={classes.job_title}>
              {rowData.title}
            </Typography>
          </div>
          <div>
            <Chip label={rowData.extra.contract_type} className={classes.chip} />
            <Chip label={rowData.location.gmap_address.address_components[0].long_name} className={classes.chip} />
          </div>
        </CardContent>
      </Card>
    );
  }
}

OffreRowComponent.propTypes = {
  classes: PropTypes.object.isRequired,
  theme: PropTypes.object.isRequired,
  rowData: PropTypes.object.isRequired
};

export default withStyles(styles, { withTheme: true })(OffreRowComponent);