import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import MainButton from 'Shared/Components/MainButton';
import AnalyticsWrapper from 'App/Shared/Components/Analytics/AnalyticsWrapper';
import Button from '@material-ui/core/Button';
import PropTypes from 'prop-types';

const styles = theme => ({
    MuiFormControlRoot: {
        display: 'flex',
        '& label': {
            fontSize: 12,
        },
    },
    MuiButtonLabel: {
        fontSize: 15,
    },
    addToCartButton: {
        '&.disabled': {
            opacity: 0.5,
            cursor: 'not-allowed',
        },
        marginTop: 10,
    },
    captionTypography: {
        display: 'block',
    },
    buttonPriceList: {
        textTransform: 'none',
        position: 'absolute',
        bottom: 90,
        fontSize: 15,
        right: 200,
        color: theme.palette.primary.main,
        [theme.breakpoints.down('xs')]: {
            left: 15,
            whiteSpace: 'nowrap',
        },
    },
});

class AddToBasket extends React.Component {
    static propTypes = {
        amount: PropTypes.number,
        disabled: PropTypes.bool,
        onPress: PropTypes.func,
        buttonLabel: PropTypes.string,
        noteLabel: PropTypes.string,
        classes: PropTypes.object,
        handleChange: PropTypes.func,
        note: PropTypes.string,
        hidePrices: PropTypes.bool,
        totalPrice: PropTypes.string,
        taxNote: PropTypes.string,
        showReceiveOfferForm: PropTypes.bool,
        priceListClick: PropTypes.func,
        showPriceList: PropTypes.bool,
        priceListLabel: PropTypes.string,
        showCallToAction: PropTypes.bool,
    };
    render() {
        const {
            amount,
            disabled,
            onPress,
            buttonLabel,
            noteLabel,
            classes,
            handleChange,
            note,
            hidePrices,
            totalPrice,
            taxNote,
            showPriceList,
            priceListLabel,
            priceListClick,
            showCallToAction,
        } = this.props;
        const disabledClassName = disabled ? 'disabled' : '';
        const className = [disabledClassName].join(' ');

        return (
            <Grid item xs={12}>
                <Divider style={{ marginBottom: 10 }} />
                {amount > 0 && !hidePrices && (
                    <React.Fragment>
                        {showPriceList && (
                            <Button onClick={priceListClick} className={classes.buttonPriceList}>
                                {priceListLabel}
                            </Button>
                        )}
                        <Typography
                            variant="h5"
                            align="right"
                            classes={{
                                h5: classes.MuiTypographyRoot,
                            }}
                        >
                            <b>{totalPrice}</b>
                        </Typography>
                        <Typography
                            variant="caption"
                            classes={{
                                caption: classes.captionTypography,
                            }}
                            gutterBottom={true}
                            align="right"
                        >
                            <i>{taxNote}</i>
                        </Typography>
                    </React.Fragment>
                )}
                {note && (
                    <TextField
                        label={noteLabel}
                        multiline
                        rows="3"
                        rowsMax="8"
                        value={note}
                        onChange={handleChange}
                        margin="normal"
                        variant="outlined"
                        translate="no"
                        classes={{
                            root: classes.MuiFormControlRoot,
                        }}
                    />
                )}
                {showCallToAction && (
                    <AnalyticsWrapper targetId="selected_amounts">
                        <MainButton
                            variant="contained"
                            size="large"
                            className={
                                className + ' ' + classes.MuiButtonLabel + ' ' + classes.addToCartButton
                            }
                            onClick={disabled ? null : onPress}
                            fullWidth
                        >
                            {buttonLabel}
                        </MainButton>
                    </AnalyticsWrapper>
                )}
            </Grid>
        );
    }
}

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