import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
import Typography from '@material-ui/core/Typography';
import PropTypes from 'prop-types';

const useStyles = makeStyles(
    () => {
        return {
            arrow: {
                display: 'table-cell',
                verticalAlign: 'middle',
                paddingLeft: 20,
            },
            button: {
                display: 'table',
            },
            label: {},
            option: {
                display: 'table-cell',
                verticalAlign: 'middle',
                width: '88%',
                '&.selected': {},
                '& .fastconfiguration-option': {
                    display: 'flex',
                },
            },
            root: {
                display: 'table-cell',
                verticalAlign: 'middle',
                cursor: 'pointer',
            },
        };
    },
    { name: 'SelectableRow' }
);

const SelectableRow = ({
    label,
    selectedOption,
    showSelected,

    closeDialog,
    renderValue,
    toggleDialog,

    onFocus,
    onOptionRendered,
}) => {
    const classes = useStyles();

    const onProductPartClicked = () => {
        toggleDialog();
        onFocus();
    };

    const renderArrow = () => {
        return <ArrowDropDownIcon className={classes.arrow} />;
    };

    const renderOption = (option, key) => {
        return (
            <div className={classes.option} key={key} data-option={option.identifier} onClick={closeDialog}>
                {onOptionRendered ? onOptionRendered(option) : option.title}
            </div>
        );
    };

    const renderComponent = () => {
        let topElement = null;

        if (showSelected) {
            if (selectedOption) {
                if (renderValue) {
                    topElement = renderValue(selectedOption);
                } else {
                    topElement = renderOption(selectedOption, true);
                }
            } else {
                topElement = <Typography className={classes.label}>{label}</Typography>;
            }
        } else {
            topElement = <Typography className={classes.label}>{label}</Typography>;
        }
        return (
            <div className={classes.root}>
                <div className={classes.button} onClick={onProductPartClicked}>
                    {topElement}
                    {renderArrow()}
                </div>
            </div>
        );
    };

    return renderComponent();
};

SelectableRow.propTypes = {
    label: PropTypes.string,
    selectedOption: PropTypes.object,
    showSelected: PropTypes.bool,

    closeDialog: PropTypes.func,
    renderValue: PropTypes.func,
    toggleDialog: PropTypes.func,

    onFocus: PropTypes.func,
    onOptionRendered: PropTypes.func,
};

SelectableRow.defaultProps = {
    selectedOption: {},
    showSelected: false,
};

export default SelectableRow;
