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 CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import KeyboardArrowleftIcon from '@material-ui/icons/PlayArrowRounded';
import Link from 'next/link';
import _ from 'lodash';

const styles = theme => ({
  card: {
    display: 'flex',
    height: '400px',
    width: '100%',
    cursor: 'pointer',
    transform: 'translateY(-0px)',
    transition: 'transform 0.25s',
    '&:hover': {
      transform: 'translateY(-15px)',
      transition: 'transform 0.5s, box-shadow 1.2s',
      '& .cardHover': {
          backgroundColor: 'rgba(0,0,0,0)',
      },
    },

    margin: '2vh 3vh 3vh 1vh',
    [theme.breakpoints.up('sm')]: {
      margin: '1vh 0 1vh 0',
      height: '530px',
    },
    [theme.breakpoints.up('md')]: {
      height: '404px',
    },
    borderRadius: '0.2em',
  },
  content: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    width: '100%',
    padding: 0,
  },
  cover: {
    width: '100%',
    height: '45%',
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundBlendMode: 'darken',
    backgroundColor: 'rgba(30,35,39,0.25)',
    transition: 'background-color 1s',
  },
  logoContainer: {
    display: 'flex',
    alignItems: 'center',
    width: 80,
    height: 80,
    position: 'absolute',
    left: '50%',
    top: '45%',
    transform: 'translate(-50%, -66%)',
    border: 'solid 5px white',
    backgroundColor: 'white',
    boxShadow: '0px 6px 15px rgba(30, 35, 39, 0.10)',
    borderRadius: '5px',
  },
  iconPlay: {
    fontSize: '3em',
    color: theme.palette.background.grey,
    position: 'absolute',
    left: 'calc(50% - 0.5em)',
    top: 'calc(22.5% - 0.5em)',
  },
  logo: {
    width: '100%',
    height: 'auto',
    objectfit: 'contain',
    borderRadius: 'inherit',
  },
  chip: {
    margin: '0 1vh 0 1vh',
  }

});

const { publicRuntimeConfig } = getConfig()

class Tile extends React.Component {

  render() {
    const { classes, rowData, children, tileIndex } = this.props;
    const imgAdUrl = (rowData.video && rowData.video.thumbnails[0] && rowData.video.thumbnails[0].sizes[4]) ? rowData.video.thumbnails[0].sizes[4].link : publicRuntimeConfig.adListDefaultUrl
    const imgCompanyUrl = (rowData.presentation_video && rowData.presentation_video.thumbnails[0] && rowData.presentation_video.thumbnails[0].sizes[4]) ? rowData.presentation_video.thumbnails[0].sizes[4].link : publicRuntimeConfig.adListDefaultUrl
    const imgUrl = (rowData.video) ? imgAdUrl : imgCompanyUrl

    const logoName = (rowData.company) ? rowData.company.logo : rowData.logo
    const logoUrl = publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + logoName

    const router = (rowData.company) ? `/Offre/${rowData.id}-${_.kebabCase(rowData.title)}` : `/Entreprise/${rowData.id}-${_.kebabCase(rowData.brand_name)}}`

    //rowData._embedded.company.brand_name
    return (
      <Link href={router} >
        <Card cyp="CardOneOffers" className={classes.card}>
          <CardContent className={classes.content}>
            <CardMedia
              className={classes.cover + ' cardHover'}
              image={imgUrl}
              title={rowData.title}
            />
            <KeyboardArrowleftIcon className={classes.iconPlay} />
            <div className={classes.logoContainer}>
              <Avatar className={classes.logo} src={logoUrl} alt={rowData.title}/>
            </div>
            { children }
          </CardContent>
        </Card>
      </Link>
    );
  }
}

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

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