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 Typography from '@material-ui/core/Typography';
import Chip from '@material-ui/core/Chip';
import IconText from './../atoms/IconText';

const styles = theme => ({
    detailsContainer: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'space-between',
        position: 'absolute',
        top: '60%',
        width: '100%',
        minHeight: '35%',
    },
    companyTitle: {
        fontSize: '1em',
        paddingLeft: theme.spacing(1),
        paddingRight: theme.spacing(1),
        minHeight: '8vh',
        [theme.breakpoints.up('md')]: {
            minHeight: 'inherit',
        },
    },
    chip: {
        height: '27px',
        padding: theme.spacing(1),
        margin: '0 1vh 0 1vh',
    },
    rootIconText: {
        margin: 0,
        padding: theme.spacing(0.5, 0),
        color: theme.palette.secondary.dark,
        '& p ': {
            color: theme.palette.secondary.text,
        }
    }

});

class CompanyOffre extends React.Component {

    render() {

        const { classes, tile } = this.props;

        const offre = (tile.count_ads == 1) ? tile.count_ads + ' offre' : tile.count_ads + ' offres'
        const nbOffre = (tile.count_ads > 0) ? offre : 'Candidature spontanée'

        return (
            <Fragment>
                <section className={classes.detailsContainer}>
                    <Typography
                        gutterBottom
                        variant="headline"
                        variant="h6"
                        component="h3"
                        align="center"
                        className={classes.companyTitle}>
                        {tile.brand_name ? tile.brand_name : "-"}
                    </Typography>

                    {tile.addresses && tile.addresses.billing && tile.addresses.billing.city &&
                        <IconText classes={{ root: classes.rootIconText }} variant="location_on" text={tile.addresses.billing.city} />
                    }
                    {tile.title &&
                        <IconText classes={{ root: classes.rootIconText }} variant="business_center" text={tile.title} />
                    }
                    {nbOffre &&
                        <Chip color="primary" label={nbOffre} className={classes.chip} />
                    }

                </section>
            </Fragment>
        );
    }
}

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

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