import React from 'react';
import isArray from 'lodash/isArray';
import PropTypes from 'prop-types';
import DialogContent from '@material-ui/core/DialogContent';
import Button from '@material-ui/core/Button';
import { withStyles } from '@material-ui/core/styles';

import { T } from 'Framework/i18n';
import CustomDialog from 'Shared/Components/CustomDialog';

import OptionRule from './OptionRule';
import RuleComponent from './RuleComponent';
import OptionExclusionRule from './OptionExclusionRule';

const styles = theme => ({
    incompatibilityDialog: {
        '& .MuiDialog-container': {
            '& .MuiDialog-paperWidthMd': {
                maxWidth: 420,
            },
        },
    },
    incompatibilityRule: {
        '& .optionRule': {
            '& .text': {
                fontSize: 14,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
            },
            [theme.breakpoints.down('sm')]: {
                '& .text': {
                    height: '150px !important',
                },
            },
        },
    },
    incompatibilityFooter: {
        padding: '10px 32px 32px 24px',
        textAlign: 'right',

        '& button': {
            marginLeft: 10,
            background: theme.palette.primary.darkText,
            color: 'white',
            '&:hover': {
                cursor: 'pointer',
                backgroundColor: '#616161',
            },
        },
        [theme.breakpoints.down('xs')]: {
            '& button': {
                marginLeft: 0,
                marginBottom: 10,
            },
        },
    },
});

export class RuleCounter {
    values = {};

    postInc = key => {
        if (undefined === this.values[key]) {
            this.values[key] = 0;
        }
        const res = this.values[key];
        this.values[key]++;
        return res;
    };

    add = ruleResult => {
        return {
            checkedOptionIndex: ruleResult.checked_option
                ? this.postInc(ruleResult.checked_option.identifier)
                : null,
            ruleTypeIndex: this.postInc(ruleResult.rule_type),
        };
    };
}

class Incompatibility extends React.Component {
    ruleTypeComponents = {
        optionexclusion: OptionExclusionRule,
        optiondependency: OptionRule,
        itemattributematch: OptionRule,
    };

    renderRules() {
        const { checkResults, ruleComponentProps, optionclassifications, classes } = this.props;

        const ruleCounter = new RuleCounter();

        return (
            isArray(checkResults.check_results) &&
            checkResults.check_results.map((result, key) => {
                if (result.status === false) {
                    const { checkedOptionIndex, ruleTypeIndex } = ruleCounter.add(result);
                    const RuleTypeComponent = this.ruleTypeComponents[result.rule_type] || RuleComponent;
                    return (
                        <RuleTypeComponent
                            {...{
                                ...ruleComponentProps,
                                key,
                                result,
                                checkedOptionIndex,
                                ruleTypeIndex,
                                optionclassifications,
                                classes,
                            }}
                        />
                    );
                }
                return null;
            })
        );
    }

    resolveConflicts() {
        const { resolveConflicts } = this.props;
        resolveConflicts();
    }

    renderFooter() {
        const { classes } = this.props;

        return (
            <div className={classes.incompatibilityFooter}>
                <Button onClick={this.props.onClose} variant="contained">
                    {T('incompatibility.cancelButton')}
                </Button>
                <Button onClick={this.resolveConflicts.bind(this)} variant="contained">
                    {T('incompatibility.okButton')}
                </Button>
            </div>
        );
    }

    render() {
        const { checkResults, show, onClose, classes } = this.props;

        if (!checkResults) {
            return null;
        }

        return (
            <CustomDialog
                open={show}
                dialogTitle={T('incompatibility.dialogTitle')}
                onClose={onClose}
                onCancel={onClose}
                className={classes.incompatibilityDialog}
            >
                <DialogContent className={'incompatibility'}>{this.renderRules()}</DialogContent>
                {this.renderFooter()}
            </CustomDialog>
        );
    }
}

Incompatibility.propTypes = {
    checkResults: PropTypes.object,
    ruleComponentProps: PropTypes.any,
    optionclassifications: PropTypes.array,
    classes: PropTypes.object,
    onClose: PropTypes.func,
    resolveConflicts: PropTypes.func,
    show: PropTypes.bool,
};

Incompatibility.defaultProps = {
    ruleComponentProps: {},
};

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