import React from 'react';
import isArray from 'lodash/isArray';
import { T } from 'Framework/i18n';
import Typography from '@material-ui/core/Typography';
import { withStyles } from '@material-ui/core/styles';
import { RuleComponent } from '../RuleComponent';
import memoize from 'Utils/Function/memoize';

const optionlistitemStyles = () => ({
    root: {
        cursor: 'auto',
    },
    details: {
        display: 'none',
    },
});

export const decorateOptionlistitem = memoize(OptionlistitemComponent =>
    withStyles(optionlistitemStyles, { name: 'OptionRuleOptionlistitem' })(props => {
        if (!OptionlistitemComponent) {
            return null;
        }

        return <OptionlistitemComponent {...props} OptionAmountComponent={null} notAccessible />;
    })
);

const styles = () => ({
    root: {},
    resolveText: {
        fontWeight: 'bold',
        paddingTop: 10,
    },
});

class OptionRule extends RuleComponent {
    constructor(props) {
        super(props);
        this.state = {
            result: {},
        };
    }

    initState(props) {
        const { result } = props;
        if (result) {
            this.setState({ result });
        }
    }

    componentDidMount() {
        this.initState(this.props);
    }

    componentWillReceiveProps(props) {
        this.initState(props);
    }

    renderInfoText() {
        const { ruleType } = this;
        return T(`incompatibility.rules.${ruleType}.text`, { tag: Typography });
    }

    renderResolveText() {
        const {
            ruleType,
            props: { classes },
        } = this;
        return T(`incompatibility.rules.${ruleType}.resolveText`, {
            tag: Typography,
            className: classes.resolveText,
        });
    }

    renderRules() {
        const { Optionlistitem, viewDetails, checkedOptionIndex, ruleTypeIndex, classes } = this.props;
        const { checked_option, conflicting_options } = this.state.result;
        const OptionComponent = OptionRule.OptionComponent || decorateOptionlistitem(Optionlistitem);

        if (!OptionComponent) {
            return null;
        }

        return (
            <div className={classes.root}>
                {checkedOptionIndex === 0 && (
                    <OptionComponent
                        option={checked_option}
                        viewDetails={viewDetails}
                        className="checkedOption"
                    />
                )}

                {ruleTypeIndex === 0 && this.renderInfoText()}
                {ruleTypeIndex === 0 && this.renderResolveText()}

                {isArray(conflicting_options) &&
                    conflicting_options.map((option, key) => {
                        return (
                            <OptionComponent
                                key={key}
                                option={option}
                                viewDetails={viewDetails}
                                className="conflictingOption"
                            />
                        );
                    })}
            </div>
        );
    }
}

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