import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import PropTypes from 'prop-types';
import get from 'lodash/get';
import getImageUrl from '../../../Utils/getImageUrl';
import { t } from 'Framework/i18n';

const styles = () => ({
    tableWrapper: {
        padding: '0 0 25px 0',
    },
    table: {
        width: '100%',
        borderCollapse: 'collapse',
        '& tr:nth-of-type(odd)': {
            backgroundColor: '#f3f3f3',
        },
    },
    title: {
        fontWeight: 'bold',
        textWrap: 'wrap',
    },
    field: {
        padding: '12px 15px',
        paddingRight: '10px',
    },
    row: {
        borderBottom: '1px solid #dddddd',
        width: '100%',
    },
    options: {
        display: 'flex',
        flexDirection: 'column',
        marginBottom: '5px',
        marginTop: '5px',
    },
    option: {
        marginLeft: '10px',
        width: '180px',
    },
    image: {
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        float: 'left',
        height: '100%',
        maxHeight: '100%',
        maxWidth: '80px',
        marginRight: '10px',
        fontSize: 0,

        '& img': {
            maxHeight: '100%',
            maxWidth: '100%',
        },
    },
});

class ConfigurationOverview extends React.Component {
    static propTypes = {
        optionclassifications: PropTypes.array,
        classes: PropTypes.object,
    };

    render() {
        const { optionclassifications, classes } = this.props;

        const renderImage = (thumbnail, componentTitle, optionTitle) => {
            const src = getImageUrl(thumbnail);
            return (
                src && (
                    <img
                        src={src}
                        alt={t('ariaLabels.overViewSelectedOptionImage', {
                            componentTitle: componentTitle,
                            optionTitle: optionTitle,
                        })}
                    />
                )
            );
        };

        return (
            <div className={classes.tableWrapper}>
                <table className={classes.table}>
                    <tbody>
                        {optionclassifications?.map(optionclassification => (
                            <>
                                {!optionclassification.hiddenInFrontend && (
                                    <tr className={classes.row}>
                                        <td className={classes.field} width={'35%'}>
                                            <Typography className={classes.title}>
                                                {optionclassification.title}
                                            </Typography>
                                        </td>
                                        <td className={classes.field}>
                                            {optionclassification.selectedoptions?.map(option => (
                                                <li className={classes.options}>
                                                    {option.amount !== 1 ? (
                                                        <div className={classes.image}>
                                                            {renderImage(
                                                                get(option, 'thumbnail', ''),
                                                                optionclassification.title,
                                                                option.title
                                                            )}
                                                            <Typography className={classes.option}>
                                                                {option.amount} x {option.title}
                                                            </Typography>
                                                        </div>
                                                    ) : (
                                                        <div className={classes.image}>
                                                            {renderImage(
                                                                get(option, 'thumbnail', ''),
                                                                optionclassification.title,
                                                                option.title
                                                            )}
                                                            <Typography className={classes.option}>
                                                                {option.title}
                                                            </Typography>
                                                        </div>
                                                    )}
                                                </li>
                                            ))}
                                        </td>
                                    </tr>
                                )}
                            </>
                        ))}
                    </tbody>
                </table>
            </div>
        );
    }
}

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