import React from 'react';
import PropTypes from 'prop-types';
import get from 'lodash/get';
import has from 'lodash/has';
import isArray from 'lodash/isArray';
import Typography from '@material-ui/core/Typography';
import OptionlistitemSelect from '../OptionGroup';

import { T } from 'Framework/i18n';
import './Styles.scss';
import SelectableRow from '../FastConfiguration/SelectableRow';

class FastConfigurationSelect extends React.Component {
    static propTypes = {
        getValue: PropTypes.func,
        onOptionSelect: PropTypes.func,
        optionClassification: PropTypes.object,
        options: PropTypes.array,
        onOptionclassificationSelect: PropTypes.func,
    };

    constructor(props) {
        super(props);
        this.optionElements = {};
    }

    isOptionSelected(option) {
        const { optionclassification } = this.props;
        let selected = false;
        if (isArray(optionclassification.selectedoptions)) {
            for (let selectedOption of optionclassification.selectedoptions) {
                if (selectedOption.identifier === option.identifier) {
                    selected = true;
                } else if (option.option_group && isArray(option.option_group.children)) {
                    for (let item of option.option_group.children) {
                        if (selectedOption.identifier === item.identifier) {
                            selected = true;
                            break;
                        }
                    }
                    if (selected) {
                        break;
                    }
                }
            }
        }
        return selected;
    }

    onItemGroupOptionSelect(option) {
        if (this.refs.dialogSelect) {
            this.refs.dialogSelect.closeDialog();
        }
        const { onOptionSelect } = this.props;
        onOptionSelect({
            ...option,
            amount: 1,
        });
    }

    isOptionEnabled(option) {
        return get(option, 'stock.traffic_light', false) !== 'red';
    }

    renderOptionGroupSelect(option) {
        if (!this.isOptionEnabled(option)) {
            return null;
        }

        const { optionClassification } = this.props;

        if (
            has(option, 'option_group.children') &&
            isArray(option.option_group.children) &&
            option.option_group.children.length > 0
        ) {
            return (
                <Typography
                    className="fastconfiguration-option-group-select"
                    onClick={e => e.stopPropagation()}
                >
                    <OptionlistitemSelect
                        itemGroup={option.option_group}
                        option={option}
                        optionclassification={optionClassification}
                        onOptionSelect={this.onItemGroupOptionSelect.bind(this)}
                        relativeTo={() => {
                            if (!this.refs.dialogSelect) {
                                return false;
                            }
                            if (this.refs.dialogSelect.state.isOpen) {
                                return this.optionElements[option.identifier];
                            } else {
                                return this.refs.dialogSelect.control;
                            }
                        }}
                        dialogPositioning={[
                            ['left', 'left'],
                            ['top', 'bottom'],
                        ]}
                        adjustWidth={true}
                        isSelected={this.isOptionSelected.bind(this)}
                        renderOption={this.renderOption.bind(this)}
                    />
                </Typography>
            );
        }
        return null;
    }

    renderOption(option, isValue) {
        return (
            <div className="fastconfiguration-option">
                <span className="fastconfiguration-option-title">{option.title}</span>

                {!isValue && this.renderOptionGroupSelect(option)}

                <span className="fastconfiguration-option-price">{option.priceFormatted}</span>
            </div>
        );
    }

    renderOwnOption(option, isValue) {
        return React.cloneElement(this.renderOption(option, isValue), {
            ref: el => (this.optionElements[option.identifier] = el),
        });
    }

    render() {
        const { closeDialog, getValue, onFocus, toggleDialog, optionClassification, rowIndex } = this.props;

        const value = getValue(optionClassification);

        return (
            <SelectableRow
                label={T('fastConfiguration.select.placeholder')}
                selectedOption={value}
                showSelected={true}
                closeDialog={closeDialog}
                renderValue={this.renderValue}
                toggleDialog={() => toggleDialog(rowIndex, optionClassification)}
                onFocus={() => onFocus(optionClassification)}
                onOptionRendered={this.renderOwnOption.bind(this)}
            />
        );
    }
}

FastConfigurationSelect.defaultProps = {
    OptionlistitemSelect,
};

FastConfigurationSelect.propTypes = {
    OptionlistitemSelect: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
};

export default FastConfigurationSelect;
