import React, { Fragment } 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 Card from '@material-ui/core/Card';
import Chip from '@material-ui/core/Chip';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Typography from '@material-ui/core/Typography';
import IconText from './../atoms/IconText';
import KeyboardArrowleftIcon from '@material-ui/icons/PlayArrowRounded';
import Link from 'next/link';
import _ from 'lodash';

const styles = theme => ({
  card: {
    display: 'flex',
    minHeight: '21vh',
    // maxHeight: '32vh',
    borderRadius: '5px',
    width: '100%',
    cursor: 'pointer',
    boxShadow: '0px 2px 4px rgba(30, 35, 39, 0.15)',
    transform: 'translateY(-0px)',
    transition: 'transform 0.25s, box-shadow ease-out',
      
    '&:hover': {
      boxShadow: '0px 6px 16px rgba(30, 35, 39, 0.15)',
      transform: 'translateY(-5px)',
      transition: 'transform 0.5s, box-shadow 2s',
      '& .cardHover': {
          backgroundColor: 'rgba(0,0,0,0)',
      },
    },
    '& > div': {
      padding: '0 !important',
    },
    [theme.breakpoints.up('md')]: {
      minHeight: '15vh',
      // maxHeight: '20vh',
    },
    margin: '1vh 2vh 1vh 2vh',
    [theme.breakpoints.up('sm')]: {
      margin: '1vh 0 1vh 0',
    },
  },
  detailsContainer: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'flex-start',
    padding: theme.spacing(2),
    width: '75%',
    // minHeight: '200px',
  },
  jobTitle: {
    fontSize: '1.2em',
    fontWeight: 'bold',
    color: theme.palette.offerlistitem.title,
  },
  companyTitle: {
    fontSize: '1.2em',
    fontWeight: '300',
    color: theme.palette.offerlistitem.title,
  },
  content: {
    display: 'flex',
    alignItems: 'center',
    width: '100%',
    padding: 0,
  },
  cover: {
    position: 'relative',
    width: '125px',
    height: '100%',
    backgroundPosition: 'center',
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundBlendMode: 'darken',
    backgroundColor: 'rgba(30,35,39,0.25)',
    transition: 'background-color 1s',
    [theme.breakpoints.up('md')]: {
      width: '35%',
    },
  },
  
  iconPlay: {
    fontSize: '2em',
    color: theme.palette.background.grey,
    position: 'absolute',
    top: 'calc(50% - 0.5em)',
    left: 'calc(50% - 0.5em)',
  },
  iconText: {
    marginLeft: 0,
    justifyContent: 'flex-start',
  },
  iconTextIcon: {
    color: theme.palette.offerlistitem.icon,
    fontSize: '1.2em',
  },
  iconTextText: {
    color: theme.palette.offerlistitem.text,
    fontSize: '1em',
    paddingLeft: theme.spacing(1),
  },
  chip: {
    color: theme.palette.secondary.main,
    backgroundColor: theme.palette.secondary.important,
  }

});

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

  render() {

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

    let companyR = company
    if (!!!company)
      companyR = rowData.company;
    else
      companyR = company;

    const imgUrl = (rowData.video && rowData.video.thumbnails && rowData.video.thumbnails[0] && rowData.video.thumbnails[0].sizes[4]) ? rowData.video.thumbnails[0].sizes[4].link : publicRuntimeConfig.adListDefaultUrl

    return (
      <Link href={`/Offre/${rowData.id}-${_.kebabCase(rowData.title)}`} >
        <Card className={classes.card + ' cypCardOffre'} >
          <CardContent className={classes.content}>
            <CardMedia
              className={ classes.cover + ' cardHover'}
              image={imgUrl}
              title={rowData.title}
            >
              <KeyboardArrowleftIcon className={classes.iconPlay} />
            </CardMedia>

            <div className={classes.detailsContainer}>
              <Typography
                gutterBottom
                variant="headline"
                variant="h6"
                component="h3"
                className={classes.jobTitle}>
                {rowData.title} 
              </Typography>
              <Typography
                variant="headline"
                variant="h6"
                component="h3"
                className={classes.companyTitle}>
                {companyR.brand_name ? companyR.brand_name : "Non renseigné"} 
              </Typography>
              <div>
                {rowData.is_promoted && (
                  <Chip label="Pourvue" className={classes.chip} />
                )}

                {!rowData.is_promoted && (
                  <Fragment>
                    <IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="business_center" text={rowData.extra.contract_type} />
                    <IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="location_on" text={rowData.location.gmap_address.formatted_address} />
                    {rowData.beneficiaire ? <IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="business" text={rowData.beneficiaire} /> :  ""} 
                    
                  </Fragment>
                )}

              </div>
            </div>
          </CardContent>
        </Card>
      </Link>
    );
  }
}

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

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