import React, { useState } from 'react';
import clsx from 'clsx';
import { withStyles } from '@material-ui/core/styles';
import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
import Button from '@material-ui/core/Button';
import Icon from '@material-ui/core/Icon';

import { t } from 'Framework/i18n';
import MainButton from 'Shared/Components/MainButton';
import CallToAction from 'App/Shared/Components/CallToAction';
import customClassName from 'App/Utils/customClassName';

const styles = theme => ({
    button: {
        pointerEvents: 'all',
        [theme.breakpoints.down('xs')]: {
            height: 56,
        },
    },
    buttonXs: {
        pointerEvents: 'all',
        height: 56,
        textTransform: 'none',
    },
    initialCallWrapper: {
        position: 'absolute',
        right: '110%',
        minWidth: 253,
        display: 'flex',
        flexDirection: 'row-reverse',
        alignItems: 'center',
        color: theme.palette.secondary.dark,
        '& div': {
            marginBottom: 0,
        },
        [theme.breakpoints.down('sm')]: {
            right: 0,
            top: 50,
            display: 'block',
            textAlign: 'center',

            width: '100%',
            '& div': {
                marginBottom: 15,
            },
        },
    },
});

export const EditDesignButton = withWidth({ initialWidth: 'lg' })(
    withStyles(styles, { name: 'EditDesignButton' })(
        ({ openDesignArea, classes, buttonXS, width, showCallToAction }) => {
            const [anchorRef, setAnchorRef] = useState(null);

            return (
                <>
                    {buttonXS ? (
                        <React.Fragment>
                            <Button
                                onClick={openDesignArea}
                                size="large"
                                fullWidth
                                variant="text"
                                className={clsx(classes.buttonXs, customClassName('open-editor-button'))}
                                ref={setAnchorRef}
                            >
                                <Icon style={{ paddingRight: 5 }}>edit</Icon>
                                {t('designAreaControlBox.editDesign')}
                            </Button>
                        </React.Fragment>
                    ) : (
                        <React.Fragment>
                            <MainButton
                                onClick={openDesignArea}
                                size="large"
                                variant="contained"
                                className={clsx(classes.button, customClassName('open-editor-button'))}
                                fullWidth
                                ref={setAnchorRef}
                            >
                                {t('designAreaControlBox.editDesign')}
                            </MainButton>
                        </React.Fragment>
                    )}
                    {showCallToAction && (
                        <CallToAction
                            offsetDirection={isWidthDown('sm', width) ? 'bottom' : 'left'}
                            anchorRef={anchorRef}
                            offset={30}
                            label={t('initialCallToAction.selectLogoPosition')}
                            className={customClassName('add-element-designer')}
                        />
                    )}
                </>
            );
        }
    )
);

export default EditDesignButton;
