import React from 'react';
import PropTypes from "prop-types";
import Router from 'next/router'
import { withStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
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';


const styles = theme => ({
  card: {
    display: 'flex',
  },
  details: {
    display: 'flex',
    flexDirection: 'column',
  },
  content: {
    flex: '1 0 auto',
  },
  cover: {
    width: 151,
    height: 151,
  },
});

class CompanyRowComponent extends React.Component {

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

    const imgDefaultUrl = "https://www.talentstube.com/img/default_picture_company.svg"

    const imgUrl = (rowData.presentation_video && rowData.presentation_video.thumbnails[0] && rowData.presentation_video.thumbnails[0].sizes[4]) ? rowData.presentation_video.thumbnails[0].sizes[4].link : imgDefaultUrl


    return (
      <Card onClick={() => Router.push(`/Company?id=${rowData.id}`)}>
        <CardHeader />
        <CardContent>
          <CardMedia
            className={classes.cover}
            image={imgUrl}
            title={rowData.presentation_video&&rowData.presentation_video.title}
          />
          <Typography gutterBottom  component="h3"
            className={classes.details}>
            {rowData.brand_name}
          </Typography>
          <Typography gutterBottom  component="h4"
            className={classes.details}>
            {rowData.website}
          </Typography>
          <Typography gutterBottom  component="h5"
            className={classes.details}>
            {rowData.description}
          </Typography>
        </CardContent>
      </Card>
    );
  }
}

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

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