import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import { t } from 'Framework/i18n';
import isFunction from 'lodash/isFunction';
import Checkbox from '@material-ui/core/Checkbox';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Icon from '@material-ui/core/Icon';
import Button from '@material-ui/core/Button';
import Popover from '@material-ui/core/Popover';

const styles = () => ({
    ImageLibraryCheckboxRoot: {
        padding: '6px 12px',
    },
    imageLibraryFormControl: {
        display: 'flex',
    },
    popOverContent: {
        padding: 16,
        width: 228,
    },
    dropdownButton: {
        borderBottom: '1px solid #C4C4C4',
        borderRadius: 0,
        textTransform: 'none',
        minWidth: 130,
        marginBottom: 16,
    },
    filterPopoverIcon: {
        marginLeft: 40,
    },
    applyFilterButton: {
        textTransform: 'none',
    },
});

export const Index = ({ tags, classes, applyFilter }) => {
    const [anchorElement, setAnchorElement] = React.useState(null);
    const [filterTags, setFilteredTags] = React.useState(tags || []);

    const handleClick = event => {
        setAnchorElement(event.currentTarget);
    };

    const handleClose = () => {
        setAnchorElement(null);
    };

    const onSelectTag = tag => event => {
        const index = filterTags.findIndex(elem => elem.title === tag.title);
        const newTags = [
            ...filterTags.slice(0, index),
            {
                checked: event.target.checked,
                title: tag.title,
            },
            ...filterTags.slice(index + 1),
        ];

        setFilteredTags(newTags);
    };

    const onApplyFilter = () => {
        if (isFunction(applyFilter)) {
            applyFilter(filterTags);
        }
        handleClose();
    };

    const open = Boolean(anchorElement);
    const id = open ? 'filter-popover' : undefined;

    return (
        <React.Fragment>
            <Button
                aria-describedby={id}
                variant="text"
                className={classes.dropdownButton}
                onClick={handleClick}
            >
                {t('imageLibrary.filter')}
                <Icon className={classes.filterPopoverIcon}>keyboard_arrow_down</Icon>
            </Button>
            <Popover
                id={id}
                open={open}
                anchorEl={anchorElement}
                onClose={handleClose}
                anchorOrigin={{
                    vertical: 'top',
                    horizontal: 'left',
                }}
                transformOrigin={{
                    vertical: 'top',
                    horizontal: 'left',
                }}
            >
                <div className={classes.popOverContent}>
                    {filterTags &&
                        filterTags.map(tag => (
                            <FormControlLabel
                                className={classes.imageLibraryFormControl}
                                key={tag.title}
                                control={
                                    <Checkbox
                                        checked={tag.checked}
                                        className={classes.ImageLibraryCheckboxRoot}
                                        onClick={onSelectTag(tag)}
                                        value={tag.title}
                                        color="primary"
                                        key={tag.title}
                                    />
                                }
                                label={tag.title}
                            />
                        ))}
                    <Button
                        variant="outlined"
                        fullWidth
                        onClick={onApplyFilter}
                        className={classes.applyFilterButton}
                    >
                        {t('imageLibrary.applyFilter')}
                    </Button>
                </div>
            </Popover>
        </React.Fragment>
    );
};

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

Index.propTypes = {
    tags: PropTypes.array,
    classes: PropTypes.object,
    applyFilter: PropTypes.func,
};
