import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';
import Icon from '@material-ui/core/Icon';
import withWidth from '@material-ui/core/withWidth';
import { t } from 'Framework/i18n';
import AnalyticsWrapper from 'App/Shared/Components/Analytics/AnalyticsWrapper';
import CallToAction from 'App/Shared/Components/CallToAction';
import customClassName from 'App/Utils/customClassName';

const styles = theme => ({
    card: {
        borderTop: '7px solid ' + theme.palette.primary.main,
        maxWidth: 650,
    },
    cardUnboxed: {
        borderTop: 'none',
        boxShadow: 'none',
        [theme.breakpoints.down('xs')]: {
            borderRadius: 0,
            paddingTop: 4,
        },
    },
    contentWrapper: {
        textAlign: 'center',
        [theme.breakpoints.down('xs')]: {
            '& div:first-child': {
                marginBottom: 16,
            },
        },
    },
    addVisualButton: {
        textTransform: 'none',
        whiteSpace: 'nowrap',
        width: '90% !important',
        overflow: 'hidden',
        borderRadius: 4,
        border: '1px solid #C4C4C4',
        height: 40,
        '& input': {
            position: 'absolute',
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
            opacity: 0,
            cursor: 'pointer',
        },
        pointerEvents: 'all', // catch the pointer events again
        [theme.breakpoints.down('xs')]: {
            height: 56,
            width: '100%',
            '& > span': {
                justifyContent: 'flex-start',
            },
        },
    },
    addVisualElementIconRoot: {
        paddingLeft: 5,
    },
    addVisualContent: {
        padding: 15,

        '&:last-child': {
            paddingBottom: 15,
        },
        [theme.breakpoints.down('xs')]: {
            padding: 0,
        },
    },
    labelText: {
        minWidth: 120,
        textOverflow: 'ellipsis',
        overflow: 'hidden',
    },
});

class AddVisualElement extends React.Component {
    static propTypes = {
        onAddTextClick: PropTypes.func,
        onAddImageClick: PropTypes.func,
        onImageFileSelected: PropTypes.func,
        boxed: PropTypes.bool,
        classes: PropTypes.object,
        width: PropTypes.string,
        components: PropTypes.shape({
            ButtonContainer: PropTypes.elementType.isRequired,
        }).isRequired,
        renderAddImageLabel: PropTypes.func.isRequired,
        renderAddTextLabel: PropTypes.func.isRequired,
        hasLastEditedDesignArea: PropTypes.bool,
        enableAddText: PropTypes.bool,
        enableAddImage: PropTypes.bool,
    };

    static defaultProps = {
        boxed: false,
        classes: {},
        components: {
            ButtonContainer: Grid,
        },
        enableAddText: true,
        enableAddImage: true,
        renderAddImageLabel: ({ classes }) => (
            <React.Fragment>
                <Icon
                    classes={{
                        root: classes.addVisualElementIconRoot,
                    }}
                    style={{ marginRight: 8 }}
                >
                    image
                </Icon>
                <b className={classes.labelText}>{t('addVisualElement.image')}</b>
            </React.Fragment>
        ),
        renderAddTextLabel: ({ classes }) => (
            <React.Fragment>
                <Icon style={{ marginRight: 8 }}>text_format</Icon>
                <b className={classes.labelText}>{t('addVisualElement.text')}</b>
            </React.Fragment>
        ),
    };

    render() {
        const {
            boxed,
            width,
            classes,
            onAddImageClick,
            onAddTextClick,
            onImageFileSelected,
            components: { ButtonContainer },
            renderAddImageLabel,
            renderAddTextLabel,
            hasLastEditedDesignArea,
            enableAddText,
            enableAddImage,
        } = this.props;

        if (!enableAddText && !enableAddImage) {
            return null;
        }

        return (
            <Grid container>
                <Grid item xs={12} lg={12} md={12} ref={ref => (this.callToActionRef = ref)}>
                    <Card
                        className={clsx(
                            boxed && width !== 'xs' ? classes.card : classes.cardUnboxed,
                            customClassName('add-elements-box')
                        )}
                    >
                        <CardContent
                            classes={{
                                root: classes.addVisualContent,
                            }}
                        >
                            <Grid container className={classes.contentWrapper}>
                                {enableAddImage && (
                                    <ButtonContainer item xs={12} sm={enableAddText ? 6 : 12}>
                                        <AnalyticsWrapper targetId="add_image">
                                            <>
                                                <Button
                                                    variant="outlined"
                                                    size="large"
                                                    classes={{ root: classes.addVisualButton }}
                                                    onClick={onAddImageClick}
                                                    ref={this.callToActionRef}
                                                >
                                                    {renderAddImageLabel(this.props)}
                                                    {onImageFileSelected && (
                                                        <input type="file" onChange={onImageFileSelected} />
                                                    )}
                                                </Button>
                                                {!hasLastEditedDesignArea && (
                                                    <CallToAction
                                                        offsetDirection="top"
                                                        anchorRef={this.callToActionRef}
                                                        offset={20}
                                                        label={t('initialCallToAction.addElementNow')}
                                                        className={customClassName('begin-here-designer')}
                                                    />
                                                )}
                                            </>
                                        </AnalyticsWrapper>
                                    </ButtonContainer>
                                )}
                                {enableAddText && (
                                    <ButtonContainer item xs={12} sm={enableAddImage ? 6 : 12}>
                                        <AnalyticsWrapper targetId="add_text">
                                            <Button
                                                variant="outlined"
                                                size="large"
                                                onClick={onAddTextClick}
                                                classes={{ root: classes.addVisualButton }}
                                            >
                                                {renderAddTextLabel(this.props)}
                                            </Button>
                                        </AnalyticsWrapper>
                                    </ButtonContainer>
                                )}
                            </Grid>
                        </CardContent>
                    </Card>
                </Grid>
            </Grid>
        );
    }
}

export default withWidth({ initialWidth: 'lg' })(
    withStyles(styles, { name: 'AddVisualElement' })(AddVisualElement)
);
