import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import Card from '@material-ui/core/Card';
import PropTypes from 'prop-types';

const styles = theme => ({
    cardPriceOverview: {
        fontSize: 12,
        boxShadow: 'none',
        overflow: 'initial',

        [theme.breakpoints.down('md')]: {
            boxShadow: 'none',
        },
        [theme.breakpoints.down('sm')]: {
            padding: 0,
        },
    },
    receiveOfferFormContainer: {
        paddingLeft: '20px',
        [theme.breakpoints.down('xs')]: {
            paddingLeft: 0,
        },
    },
    productVariantWrapper: {
        [theme.breakpoints.up('sm')]: {
            minHeight: '25vh',
        },
    },
    titleTypography: {
        paddingBottom: 16,
    },
});

class PriceOverview extends React.Component {
    static propTypes = {
        title: PropTypes.string,
        contactData: PropTypes.string,
        classes: PropTypes.object,
        productVariantComponent: PropTypes.element,
        amountComponent: PropTypes.element,
        notificationComponent: PropTypes.array,
        priceListComponent: PropTypes.element,
        addToCartComponent: PropTypes.element,
        receiveOfferFormComponent: PropTypes.element,
        showReceiveOfferForm: PropTypes.bool,
        amount: PropTypes.number,
        acceptDesignComponent: PropTypes.element,
        acceptDataPrivacyComponent: PropTypes.element,
    };
    render() {
        const {
            title,
            contactData,
            classes,
            productVariantComponent,
            amountComponent,
            notificationComponent,
            priceListComponent,
            addToCartComponent,
            receiveOfferFormComponent,
            showReceiveOfferForm,
            amount,
            acceptDesignComponent,
            acceptDataPrivacyComponent,
        } = this.props;

        return (
            <Grid item xs={12} md={12}>
                <Card className={classes.cardPriceOverview}>
                    <Grid container>
                        {showReceiveOfferForm && (
                            <Grid container>
                                <Grid item xs={12} sm={6}>
                                    <Typography className={classes.titleTypography}>
                                        <b>{title}</b>
                                    </Typography>
                                    {notificationComponent}
                                    {productVariantComponent}
                                    {amountComponent}
                                </Grid>
                                <Grid item xs={12} sm={6} className={classes.receiveOfferFormContainer}>
                                    <Typography className={classes.titleTypography}>
                                        <b>{contactData}</b>
                                    </Typography>
                                    {receiveOfferFormComponent}
                                </Grid>
                                <Grid item xs={12}>
                                    {acceptDesignComponent}
                                    {acceptDataPrivacyComponent}
                                    {amount > 0 && <Divider />}
                                    {priceListComponent}
                                </Grid>
                                <Grid item xs={12}>
                                    {addToCartComponent && <Divider />}
                                    {addToCartComponent}
                                </Grid>
                            </Grid>
                        )}
                        {!showReceiveOfferForm && (
                            <Grid container>
                                <Grid item xs={12}>
                                    {notificationComponent}
                                    {productVariantComponent && (
                                        <React.Fragment>
                                            <Typography variant="body1">
                                                <b>{title}</b>
                                            </Typography>
                                            <Grid item xs={12} className={classes.productVariantWrapper}>
                                                {productVariantComponent}
                                            </Grid>
                                        </React.Fragment>
                                    )}
                                </Grid>
                                <Grid item xs={12} sm={12}>
                                    {amountComponent}
                                </Grid>
                                <Grid item xs={12}>
                                    {acceptDesignComponent}
                                    {amount > 0 && <Divider />}
                                    {priceListComponent}
                                </Grid>
                                <Grid item xs={12}>
                                    {addToCartComponent && <Divider />}
                                    {addToCartComponent}
                                </Grid>
                            </Grid>
                        )}
                    </Grid>
                </Card>
            </Grid>
        );
    }
}

export default withStyles(styles, { name: 'PriceOverview' })(PriceOverview);
