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 ArrowForwardIcon from '@material-ui/icons/ArrowForward';
import Link from 'next/link';

const styles = theme => ({
  card: {
    display: 'flex',
    minHeight: '21vh',
    maxHeight: '25vh',
    width: '100%',
    margin: theme.spacing(1,0),
    borderRadius: '5px',
    cursor: 'pointer',
    '& > div': {
      padding: '0 !important',
    },

    [theme.breakpoints.up('md')]: {
      width: '30%',
    },
    [theme.breakpoints.down('md')]: {
      width: '40%',
    },
    [theme.breakpoints.down('xs')]: {
      width: '100%',
    },
    [theme.breakpoints.up('sm')]: {
      margin: '1vh 0 1vh 0',
    },
  },
  detailsContainer: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'flex-start',
    padding: theme.spacing(3, 2),
    width: '75%',
  },
  jobTitle: {
    fontSize: '1em',
    fontWeight: 'bold',
    color: theme.palette.offerlistitem.title,
  },
  companyTitle: {
    fontSize: '0.8em',
    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',
  },
  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: '0.8em',
  },
  iconTextText: {
    color: theme.palette.offerlistitem.text,
    fontSize: '0.6em',
    paddingLeft: theme.spacing(1),
  },
  bottomCard: {
    display: 'flex',
    justifyContent: 'space-between',
    width: '90%',
  },
  chip: {
    color: theme.palette.secondary.main,
    backgroundColor: theme.palette.primary.important,
  },
  icon: {
    color: theme.palette.secondary.dark,
  },

});


const { publicRuntimeConfig } = getConfig()

//TODO:shouldn't be here
//must go in API
const status = new Map([

  ["DRAFT"
    , "Brouillon"]
  ,
  ["TO_PUBLISH"
    , "En cours de validation"]
  ,
  ["VALIDATED"
    , "Validée"]
  ,
  ["PUBLISHED"
    , "Publiée"]
  ,
  ["CLOSED"
    , "Cloturée"]
  ,
  ["EXPIRED"
    , "Expirée"]
  ,
  ["SENDED"
    , "Envoyée"]
  ,
  ["DECLINED"
    , "Refusée"]
  ,
  ["NEW"
    , "Nouveau"]
  ,
  ["VIEWED"
    , "Visionnée"]
  ,
  ["NEGATIVE"
    , "Négatif"]
  ,
  ["POSITIVE"
    , "Positif"]
  ,
  ["INFOS"
    , "Demande d’informations"]
  ,
  ["CONTACTED"
    , "Demande d’informations"]
  ,
  ["CONTACTED.RDV"
    , "Convocation entretien"]

])
class AnswerRowComponent extends React.Component {

  render() {

    const { classes, rowData, company } = this.props;
    // company not used ?
    let companyR = company
    if (!!!company)
      companyR = rowData.ad.company;
    else
      companyR = company;

    const imgUrl = (rowData.ad && rowData.ad.video && rowData.ad.video.thumbnails[0] && rowData.ad.video.thumbnails[0].sizes[4])
      ? rowData.ad.video.thumbnails[0].sizes[4].link
      : publicRuntimeConfig.adListDefaultUrl
    const logoUrl = publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + companyR.logo

    return (
      <Link href={`/Candidature/${rowData.id}`} >
        <Card className={classes.card} >
          {rowData.ad ? (
              <CardContent className={classes.content}>
              <CardMedia
                className={classes.cover}
                image={imgUrl}
                title={rowData.ad.title}
              >
                <KeyboardArrowleftIcon className={classes.iconPlay} />
              </CardMedia>
  
              <div className={classes.detailsContainer}>
                <Typography
                  gutterBottom
                  variant="headline"
                  variant="h6"
                  component="h3"
                  className={classes.jobTitle}>
                  {rowData.ad.title&&rowData.ad.title}
                </Typography>
                <Typography
                  variant="headline"
                  variant="h6"
                  component="h4"
                  className={classes.companyTitle}>
                  {rowData.ad.company.brand_name&&rowData.ad.company.brand_name}
                </Typography>
                <div className={ classes.bottomCard }>
                  <Chip size="small" label={status.get(rowData.status)} className={classes.chip} />
                  <ArrowForwardIcon className={classes.icon} />
                </div>
              </div>
            </CardContent>
          ):(
            <CardContent className={classes.content}>
              <CardMedia
                className={classes.cover}
                image={publicRuntimeConfig.symphonyUrl + publicRuntimeConfig.cachedMediaUrl + rowData.company.logo}
                title={rowData.company.brand_name}
              >
                <KeyboardArrowleftIcon className={classes.iconPlay} />
              </CardMedia>
  
              <div className={classes.detailsContainer}>
                <Typography
                  gutterBottom
                  variant="headline"
                  variant="h6"
                  component="h3"
                  className={classes.jobTitle}>
                Candidature spontanée
                </Typography>
                <Typography
                  variant="headline"
                  variant="h6"
                  component="h4"
                  className={classes.companyTitle}>
                  {rowData.company.brand_name&&rowData.company.brand_name}
                </Typography>
                <div className={ classes.bottomCard }>
                  <Chip size="small" label={status.get(rowData.status)} className={classes.chip} />
                  <ArrowForwardIcon className={classes.icon} />
                </div>
              </div>
            </CardContent>
          )}
        </Card>
      </Link>
    );
  }
}

AnswerRowComponent.defaultProps = {
  company: {}
}

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

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