import React, { useState } from 'react';
import Icon from '@material-ui/core/Icon';
import InputAdornment from '@material-ui/core/InputAdornment';
import SearchIcon from '@material-ui/icons/Search';
import RefreshIcon from '@material-ui/icons/Refresh';
import PropTypes from 'prop-types';
import Typography from '@material-ui/core/Typography';
import { t } from 'Framework/i18n';
import IconButton from '@material-ui/core/IconButton';
import TextField from '@material-ui/core/TextField';
import { withStyles } from '@material-ui/core/styles';
import { isWidthDown } from '@material-ui/core/withWidth';

const styles = theme => ({
    textFieldInput: {
        padding: 10,
        marginTop: 1,
    },
    noColorWrapper: {
        color: theme.palette.secondary.light,
        textAlign: 'center',
    },
    searchCloseTypography: {
        color: theme.palette.secondary.light,
        display: 'inherit',
        paddingTop: 15,
        '& span:last-child': {
            marginLeft: 10,
        },
        '&:hover': {
            cursor: 'pointer',
        },
    },
    iconNoColorFound: {
        color: theme.palette.secondary.light,
        fontSize: 72,
    },
    colorsWrap: ({ heightColorPaletteWrapper, width }) => ({
        display: 'flex',
        padding: '0 16px',
        maxHeight: isWidthDown('xs', width) ? heightColorPaletteWrapper : 250,
        flexWrap: 'wrap',
        overflowY: 'auto',
    }),
    colorSearchWrap: {
        display: 'flex',
        justifyContent: 'center',
    },
});

export const ColorPalettesSearch = withStyles(styles, { name: 'ColorPalettesSearch' })(props => {
    const [filteredColors, setFilteredColors] = useState(props.searchPalette);

    const onSearch = searchText => {
        const { searchPalette } = props;
        const filterColors = searchPalette.colors && {
            colors: searchPalette.colors.filter(
                color => color.title.toLowerCase().indexOf(searchText.toLowerCase()) !== -1
            ),
        };
        const filteredColorPalette = {
            ...searchPalette,
            colors: filterColors.colors,
        };
        setFilteredColors(filteredColorPalette);
    };
    const keyUp = () => {
        onSearch(props.searchText);
    };

    return (
        props.isSearchActive && (
            <div>
                <TextField
                    variant="outlined"
                    fullWidth
                    value={props.searchText}
                    onChange={props.changeText}
                    onKeyUp={keyUp}
                    margin="normal"
                    translate="no"
                    InputProps={{
                        endAdornment: (
                            <InputAdornment position="end">
                                <IconButton
                                    aria-label="Toggle password visibility"
                                    onClick={() => onSearch(props.searchText)}
                                >
                                    <SearchIcon />
                                </IconButton>
                            </InputAdornment>
                        ),
                        classes: {
                            inputAdornedEnd: props.classes.textFieldInput,
                        },
                    }}
                />
                <div className={props.classes.colorSearchWrap}>
                    <Typography
                        classes={{ root: props.classes.searchCloseTypography }}
                        onClick={props.closeSearch}
                        noWrap
                    >
                        <RefreshIcon />
                        <span>{t('colorPalettes.resetSearch')}</span>
                    </Typography>
                </div>
                {filteredColors.colors.length > 0 && (
                    <div className={props.classes.colorsWrap}>{props.renderColors(filteredColors)}</div>
                )}
                {filteredColors && filteredColors.colors && filteredColors.colors.length === 0 && (
                    <Typography component="div" classes={{ root: props.classes.noColorWrapper }}>
                        <Icon classes={{ root: props.classes.iconNoColorFound }}>format_color_reset</Icon>
                        <div>{t('colorPalettes.colorNotFound')}</div>
                    </Typography>
                )}
            </div>
        )
    );
});

ColorPalettesSearch.propTypes = {
    onSearch: PropTypes.func,
    closeSearch: PropTypes.func,
    searchText: PropTypes.string,
    isSearchActive: PropTypes.bool,
};
