import React from 'react';
import PropTypes from 'prop-types';
import withWidth from '@material-ui/core/withWidth';
import { withStyles } from '@material-ui/core/styles';
import isFunction from 'lodash/isFunction';
import Input from '@material-ui/core/Input';
import InputAdornment from '@material-ui/core/InputAdornment';
import RemoveCircle from '../../../../Resources/Icons/MaterialUI/Icons/RemoveCircle';
import AddCircle from '../../../../Resources/Icons/MaterialUI/Icons/AddCircle';

const styles = theme => ({
    disabledIncrementButton: {
        opacity: 0.2,
    },
    disabledDecrementButton: {
        opacity: 0.2,
    },
    activeIncrementButton: {
        opacity: 1,
        cursor: 'pointer',
        color: theme.palette.text.secondary,
    },
    activeDecrementButton: {
        opacity: 1,
        cursor: 'pointer',
        color: theme.palette.text.secondary,
    },
    itemText: {
        fontSize: 15,
        color: theme.palette.text.secondary,
        textAlign: 'center',
        lineHeight: 2.1,
        cursor: 'default',
        height: 33,
    },
});

export const PlusMinusInput = withWidth()(
    withStyles(styles, { name: 'PlusMinusInput' })(props => {
        const increment = () => {
            const { onChangeValue, maxSize, value } = props;
            if (isFunction(onChangeValue)) {
                const intValue = parseInt(value);
                intValue < maxSize && onChangeValue(intValue + 1);
            }
        };
        const decrement = () => {
            const { onChangeValue, minSize, value } = props;
            if (isFunction(onChangeValue)) {
                const intValue = parseInt(value);
                intValue > minSize && onChangeValue(intValue - 1);
            }
        };
        const { maxSize, minSize, value, classes } = props;
        const disableIncrementButton =
            value < maxSize ? classes.activeIncrementButton : classes.disabledIncrementButton;
        const disableDecrementButton =
            value > minSize ? classes.activeDecrementButton : classes.disabledDecrementButton;

        return (
            <div>
                <Input
                    fullWidth
                    readOnly
                    classes={{ input: classes.itemText }}
                    value={parseInt(value)}
                    min={minSize}
                    max={maxSize}
                    startAdornment={
                        <InputAdornment className={disableDecrementButton} position="start">
                            <RemoveCircle onClick={decrement} />
                        </InputAdornment>
                    }
                    endAdornment={
                        <InputAdornment className={disableIncrementButton} position="end">
                            <AddCircle onClick={increment} />
                        </InputAdornment>
                    }
                />
            </div>
        );
    })
);

PlusMinusInput.propTypes = {
    maxSize: PropTypes.number,
    minSize: PropTypes.number,
    value: PropTypes.number,
    classes: PropTypes.object,
    onChangeValue: PropTypes.func,
};
