import React from 'react';
import Dialog from 'Framework/Components/Dialog';

import isArray from 'lodash/isArray';
import PropTypes from 'prop-types';
import DialogContent from '@material-ui/core/DialogContent';
import LoadingOverlay from 'Framework/Components/LoadingOverlay';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(
    theme => {
        return {
            content: {
                padding: '0 !important',
            },
            labels: {},
            option: {
                minHeight: 25,
                display: 'table',
                width: '100%',

                '& $labels': {
                    display: 'table-cell',
                    verticalAlign: 'middle',
                    padding: '0px 5px',

                    '& $price': {
                        float: 'right',
                    },
                },
                '&.selected': {
                    backgroundColor: theme.palette.secondary.lighter,
                },
            },
            price: {},
            root: {
                '& .dialog-title-bar': {
                    display: 'none',
                },
            },
        };
    },
    { name: 'CustomDialogSelect' }
);

const CustomDialogSelect = ({
    isLoading,
    isSelected,
    onSelectOption,
    options,
    show,
    selectedOption,
    selectedOptionProperty,
    LoadingComponent,
}) => {
    const classes = useStyles();

    const isOptionSelected = option => {
        if (isSelected) {
            return isSelected(option);
        }

        if (!selectedOption) {
            return false;
        }

        // if there are more values in the selection
        if (isArray(selectedOption)) {
            for (let v of selectedOption) {
                if (selectedOptionProperty) {
                    if (v[selectedOptionProperty] === option[selectedOptionProperty]) {
                        return true;
                    }
                } else {
                    if (v === option) {
                        return true;
                    }
                }
            }
        } else if (selectedOptionProperty) {
            return selectedOption[selectedOptionProperty] === option[selectedOptionProperty];
        } else {
            return selectedOption === option;
        }
    };

    const renderOption = (option, key) => {
        const selected = isOptionSelected(option);
        return (
            <div
                className={classes.option + (selected ? ' selected' : '')}
                key={key}
                data-option={option.identifier}
                onClick={() => onSelectOption(option)}
            >
                <div className={classes.labels}>
                    <span>{option.title}</span>
                    <span className={classes.price}>{option.priceFormatted}</span>
                </div>
            </div>
        );
    };

    const renderComponent = () => {
        return (
            <Dialog className={classes.root} show={show}>
                <DialogContent className={classes.content}>
                    {isLoading ? (
                        <LoadingComponent show={isLoading} />
                    ) : (
                        isArray(options) && options.map((option, key) => renderOption(option, key))
                    )}
                </DialogContent>
            </Dialog>
        );
    };

    return renderComponent();
};

CustomDialogSelect.propTypes = {
    isSelected: PropTypes.func,
    onSelectOption: PropTypes.func,
    options: PropTypes.array,
    show: PropTypes.bool,
    selectedOptionProperty: PropTypes.string,

    LoadingComponent: PropTypes.elementType,
};

CustomDialogSelect.defaultProps = {
    onSelectOption: () => {},
    options: [],
    show: false,

    LoadingComponent: LoadingOverlay,
};

export default CustomDialogSelect;
