import React, { Fragment } from 'react';
import PropTypes from "prop-types";
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import IconText from './../atoms/IconText';

const styles = theme => ({
    detailsContainer: {
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        position: 'absolute',
        top: '44%',
        width: '100%',
    },
    companyTitle: {
        fontSize: '1em',
        fontWeight: '100',
        padding: theme.spacing(0, 2),
        marginTop: '4vh',
        minHeight: '6vh',
        [theme.breakpoints.up('md')]: {
            minHeight: '3vh',
        },
    },
    jobTitle: {
        fontSize: '1.2em',
        padding: theme.spacing(0, 2),
        minHeight: '8vh',
        [theme.breakpoints.up('lg')]: {
            minHeight: '50px',
        },
    },
    rootIconText: {
        margin: 0,
        padding: theme.spacing(0.5, 2),
        color: theme.palette.secondary.dark,
        justifyContent: 'flex-start',
        '& p ': {
            color: theme.palette.secondary.text,
        }
    }

});

class TileOffre extends React.Component {

    render() {

        const { classes, tile } = this.props;

        return (
            <Fragment>
                <section className={classes.detailsContainer} >
                    <Typography
                        gutterBottom
                        variant="headline"
                        variant="h6"
                        component="h4"
                        align="center"
                        className={classes.companyTitle}>
                        {tile.company.brand_name && tile.company.brand_name} 
                    </Typography>
                    <Typography
                        gutterBottom
                        variant="headline"
                        variant="h6"
                        component="h3"
                        align="left"
                        className={classes.jobTitle}>
                        {tile.title && tile.title}
                    </Typography>

                    {/* 
                        <IconText classes={{root: classes.rootIconText}} variant="business_center" text={tile.title} />
                    */}


                    {tile.location && tile.location.gmap_address && tile.location.gmap_address.address_components && tile.location.gmap_address.address_components[0].long_name &&
                        <IconText classes={{ root: classes.rootIconText }} variant="location_on" text={tile.location.gmap_address.address_components[0].long_name} />
                    }
                    {tile.extra && tile.extra.contract_type &&
                        <IconText classes={{ root: classes.rootIconText }} variant="assignment" text={tile.extra.contract_type} />
                    }

                    {tile.beneficiaire &&
                        <IconText classes={{ root: classes.rootIconText }} variant="business" text={tile.beneficiaire} />
                    }
                </section>
            </Fragment>
        );
    }
}

TileOffre.propTypes = {
    classes: PropTypes.object.isRequired,
    theme: PropTypes.object.isRequired,
    tile: PropTypes.object.isRequired
};

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