import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import isEmpty from 'lodash/isEmpty';
import Icon from '@material-ui/core/Icon';
import MainButton from 'Shared/Components/MainButton';
import { t } from 'Framework/i18n';
import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
import Typography from '@material-ui/core/Typography';
import ImageLibraryFilter from '../ImageLibraryFilter';
import ImageLibraryThumbnail from '../ImageLibraryThumbnail';
import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';
import DialogActions from '@material-ui/core/DialogActions';

const styles = theme => ({
    root: {
        borderTop: '7px solid ' + theme.palette.primary.main,
    },
    closeButton: {
        position: 'absolute',
        right: theme.spacing(2),
        top: theme.spacing(2),
        color: theme.palette.grey[500],
        cursor: 'pointer',
    },
    title: {
        fontWeight: 'bold',
    },
    actionsRoot: {
        padding: theme.spacing(2),
    },
    applyButton: {
        fontSize: 15,
        minWidth: 140,
        height: 40,
        '&:disabled': {
            backgroundColor: '#DDDDDD',
            '& span': {
                color: '#C4C4C4',
            },
        },

        [theme.breakpoints.down('xs')]: {
            height: 56,
        },
    },
});

class AddImagePanel extends React.Component {
    static propTypes = {
        tags: PropTypes.array.isRequired,
        onClose: PropTypes.func.isRequired,
        classes: PropTypes.object.isRequired,
        onSelectImage: PropTypes.func.isRequired,
        onSelectTag: PropTypes.func.isRequired,
        images: PropTypes.array,
        loaderComponent: PropTypes.element,
        width: PropTypes.string,
        open: PropTypes.bool.isRequired,
        loadTags: PropTypes.func,
        dismissError: PropTypes.func,
        client: PropTypes.object,
    };

    componentDidUpdate(prevProps) {
        const { open } = this.props;
        if (open && !prevProps.open) {
            const { dismissError, tags, loadTags } = this.props;
            dismissError && dismissError();
            (!tags || !tags.length) && loadTags();
        }
    }

    state = {
        selectedImage: {},
    };

    onSelectImage = selectedImage => {
        this.setState({ selectedImage });
    };

    selectGalleryImage = () => {
        const { selectedImage } = this.state;
        const { onSelectImage, onClose } = this.props;
        onSelectImage(selectedImage);
        onClose();
    };

    render() {
        const {
            tags,
            images,
            onClose,
            classes,
            loaderComponent,
            width,
            open,
            onSelectTag,
            client,
        } = this.props;
        const { selectedImage } = this.state;

        const showImageLibrary = images.length > 0;
        const showFilters = tags.length > 0;

        const applyButtonDisabled = isEmpty(selectedImage);

        const dialogTitleId = 'gallery-image-dialog-title';

        return (
            <Dialog
                open={open}
                maxWidth="md"
                fullWidth={true}
                onClose={onClose}
                fullScreen={width === 'sm' || width === 'xs'}
                classes={{ paper: classes.root }}
                aria-labelledby={dialogTitleId}
            >
                <DialogTitle disableTypography={true}>
                    <Typography variant="h5" className={classes.title} id={dialogTitleId}>
                        {t('imageLibrary.gallery')}
                    </Typography>
                    <Icon aria-label="close" className={classes.closeButton} onClick={onClose}>
                        close
                    </Icon>
                </DialogTitle>
                <DialogContent>
                    {showImageLibrary && (
                        <>
                            {loaderComponent}
                            {showFilters && <ImageLibraryFilter tags={tags} applyFilter={onSelectTag} />}
                            <ImageLibraryThumbnail
                                motives={images}
                                onSelect={this.onSelectImage}
                                selected={selectedImage}
                                client={client}
                            />
                        </>
                    )}
                </DialogContent>
                <DialogActions classes={{ root: classes.actionsRoot }}>
                    <MainButton
                        disabled={applyButtonDisabled}
                        fullWidth={isWidthDown('xs', width)}
                        onClick={() => this.selectGalleryImage()}
                        variant="contained"
                        className={classes.applyButton}
                    >
                        {t('fileUpload.apply')}
                    </MainButton>
                </DialogActions>
            </Dialog>
        );
    }
}

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