import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import withWidth from '@material-ui/core/withWidth';
import { t } from 'Framework/i18n';
import isEmpty from 'lodash/isEmpty';
import upperFirst from 'lodash/upperFirst';
import IconButton from '@material-ui/core/IconButton';
import InputAdornment from '@material-ui/core/InputAdornment';
import Dialog from '@material-ui/core/Dialog';
import Button from '@material-ui/core/Button';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';
import DialogActions from '@material-ui/core/DialogActions';
import Typography from '@material-ui/core/Typography';
import TextField from '@material-ui/core/TextField';
import Icon from '@material-ui/core/Icon';
import AddCircle from '@material-ui/icons/AddCircle';
import DeleteIcon from '@material-ui/icons/Delete';
import MainButton from '../../../../Shared/Components/MainButton';
import Grid from '@material-ui/core/Grid';
import { PlusMinusInput } from '../PlusMinusInput';

const styles = theme => ({
    dialogTitleRoot: {
        padding: '12px 12px 20px 30px',
        fontWeight: 400,
        borderTop: '7px solid ' + theme.palette.primary.main,
    },
    dialogContentRoot: {
        padding: '0 32px 24px 30px',
    },
    TypographyCaption: {
        lineHeight: 2.7,
    },
    CloseIcon: {
        position: 'absolute',
        right: 16,
        top: 16,

        '&:hover': {
            cursor: 'pointer',
        },
    },
    activeButton: {
        margin: '0 30px 16px 0',
        padding: '10px 24px',
    },
    addButton: {
        textTransform: 'none',
    },
    selectedVariant: {
        maxWidth: 150,
        width: '100%',
        height: 'auto',
        objectFit: 'contain',
    },
    textFieldBulkName: {
        width: 'calc(100% - 24px)',
    },
    buttonStyle: {
        color: theme.buttons.mainBtn.backgroundColor,
    },
    rootIconButton: {
        padding: '12px 0',
    },
    variantLabel: {
        color: theme.palette.secondary.dark,
        fontSize: '15px',
        lineHeight: 2.1,
    },
    addButtonGrid: {
        display: 'flex',
        justifyContent: 'center',
        marginTop: 24,
    },
    textInput: {
        display: 'flex',
        marginTop: 24,
    },
    textInputProp: {
        height: 10,
    },
    textInputLabel: {
        transform: 'translate(14px, 14px) scale(1)',
    },
    newBulkName: {
        fontWeight: 'bold',
        lineHeight: 1,
        padding: '0 5px',
    },
    gridItem: {
        paddingRight: 15,
    },
});

class BulkNames extends React.Component {
    static propTypes = {
        classes: PropTypes.object,
        selectedVariant: PropTypes.object,
        activeSizeVariant: PropTypes.object,
        handleChange: PropTypes.func,
        handleSave: PropTypes.func,
        onClose: PropTypes.func,
        showBulkNameForm: PropTypes.bool,
        width: PropTypes.string,
        size: PropTypes.string,
        selectedAmount: PropTypes.array,
        amountLabel: PropTypes.string,
        textInputs: PropTypes.array,
        totalAmount: PropTypes.func,
        handleDelete: PropTypes.func,
        saveConfigurationBulkNames: PropTypes.func,
        handleText: PropTypes.func,
        addTextField: PropTypes.func,
    };

    render() {
        const {
            classes,
            width,
            onClose,
            showBulkNameForm,
            amountLabel,
            selectedVariant,
            activeSizeVariant,

            totalAmount,
            textInputs,
            handleDelete,
            addTextField,
            handleText,
            saveConfigurationBulkNames,
            size,
        } = this.props;

        const dialogTitleId = 'bulk-names-edit-dialog-title';

        return (
            <Dialog
                open={showBulkNameForm}
                onClose={onClose}
                maxWidth={'sm'}
                fullWidth
                fullScreen={width === 'sm' || width === 'xs'}
                scroll="paper"
                aria-labelledby={dialogTitleId}
            >
                <DialogTitle className={classes.dialogTitleRoot}>
                    <Typography className={classes.TypographyCaption} variant="body1" id={dialogTitleId}>
                        <b>{t('bulkNames.bulkNamesEdit')}</b>
                    </Typography>
                    <IconButton className={classes.CloseIcon} onClick={onClose}>
                        <Icon>close</Icon>
                    </IconButton>
                </DialogTitle>
                <DialogContent className={classes.dialogContentRoot}>
                    <Grid container>
                        <Grid item xs={3} className={classes.gridItem}>
                            {selectedVariant.url && (
                                <img
                                    src={selectedVariant.url}
                                    alt={selectedVariant.title}
                                    aria-label={selectedVariant.title}
                                    className={classes.selectedVariant}
                                />
                            )}
                        </Grid>
                        <Grid item xs={9}>
                            <Typography classes={{ root: classes.variantLabel }}>
                                <b>{upperFirst(selectedVariant.title)}</b>
                            </Typography>
                            {!isEmpty(activeSizeVariant) && (
                                <Typography classes={{ root: classes.variantLabel }}>
                                    {t('bulkNames.size')}
                                    <b>{size}</b>
                                </Typography>
                            )}
                            <Typography classes={{ root: classes.variantLabel }}>
                                {t('bulkNames.amount')}
                                <b>{totalAmount()}</b>
                            </Typography>
                        </Grid>
                        <Grid item xs={12}>
                            {textInputs.map((text, index) => (
                                <Grid container key={index} className={classes.textInput}>
                                    <Grid item xs={8}>
                                        <TextField
                                            id={toString(index)}
                                            className={classes.textFieldBulkName}
                                            label={t('bulkNames.name')}
                                            value={text.text}
                                            onChange={handleText('text', index)}
                                            variant="outlined"
                                            InputLabelProps={{
                                                classes: {
                                                    outlined: classes.textInputLabel,
                                                },
                                            }}
                                            InputProps={{
                                                classes: {
                                                    input: classes.textInputProp,
                                                },
                                                endAdornment: (
                                                    <InputAdornment position="end">
                                                        <IconButton
                                                            aria-label={t('bulkNames.deleteBulkName')}
                                                            onClick={handleDelete(index)}
                                                            classes={{
                                                                label: classes.buttonStyle,
                                                                root: classes.rootIconButton,
                                                            }}
                                                        >
                                                            <DeleteIcon />
                                                        </IconButton>
                                                    </InputAdornment>
                                                ),
                                            }}
                                        />
                                    </Grid>
                                    <Grid item xs={4}>
                                        <PlusMinusInput
                                            maxSize={9999}
                                            minSize={1}
                                            amountLabel={amountLabel}
                                            value={text.amount}
                                            onChangeValue={handleText('amount', index)}
                                        />
                                    </Grid>
                                </Grid>
                            ))}
                        </Grid>
                        <Grid item xs={12} className={classes.addButtonGrid}>
                            <Button className={classes.addButton} onClick={addTextField}>
                                <AddCircle />
                                <Typography classes={{ root: classes.newBulkName }}>
                                    {t('bulkNames.addNewBulkName')}
                                </Typography>
                            </Button>
                        </Grid>
                    </Grid>
                </DialogContent>
                <DialogActions>
                    <MainButton
                        onClick={saveConfigurationBulkNames}
                        variant="contained"
                        size="medium"
                        className={classes.activeButton}
                    >
                        {t('bulkNames.apply')}
                    </MainButton>
                </DialogActions>
            </Dialog>
        );
    }
}

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