import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import get from 'lodash/get';
import Typography from '@material-ui/core/Typography';
import getImageUrl from 'App/Utils/getImageUrl';
import customClassName from 'App/Utils/customClassName';
import { Hyphenated } from 'Framework/i18n';
import { withStyles } from '@material-ui/core/styles';
import { t } from 'Framework/i18n';
import AccessibleButton from '../../../../Shared/Components/AccessibleButton/AccessibleButton';

const ProductPart = ({
    displaySwitchedOptions,
    onSelect,
    optionclassification,
    selectedOption,
    verticalMode,
    setAnchorRef,
    classes,
    optionListVisible,
    onCloseSelected,
}) => {
    const selected = get(selectedOption, 'identifier', null) === get(optionclassification, 'identifier', '');
    const selectedAndVisible = optionListVisible && selected;

    const direction = verticalMode ? 'vertical' : 'horizontal';

    useEffect(() => {
        if (!optionListVisible && selected) {
            onCloseSelected(optionclassification);
        }
    }, [optionListVisible]);

    const displayImage = () => {
        const imageUrl =
            displaySwitchedOptions && selectedOption
                ? getImageUrl(selectedOption.thumbnail)
                : getImageUrl(optionclassification.thumbnail);

        return (
            <i
                className={`${classes.icon} ${direction}`}
                style={imageUrl ? { backgroundImage: 'url(' + imageUrl + ')' } : {}}
                aria-label={t('ariaLabels.component', { title: optionclassification.title })}
                role="img"
            />
        );
    };

    const displayText = () => {
        return (
            <Typography className={classes.rootTypography} variant="body1" component="span">
                <Hyphenated>{optionclassification.title}</Hyphenated>
            </Typography>
        );
    };

    const onClick = event => {
        event.stopPropagation();
        onSelect(optionclassification);
    };

    return (
        <div className={clsx(classes.root, direction, customClassName('component'))} ref={setAnchorRef}>
            <div className={`${classes.marker} ${direction} ${selectedAndVisible ? 'selected' : ''}`} />
            <AccessibleButton className={`${classes.content} ${direction}`} onClick={onClick}>
                {displayImage()}
                {displayText()}
            </AccessibleButton>
        </div>
    );
};

ProductPart.defaultProps = {
    optionclassification: {},
    onSelect: () => {},
    verticalMode: true,
};

ProductPart.propTypes = {
    displaySwitchedOptions: PropTypes.bool,
    onSelect: PropTypes.func,
    optionclassification: PropTypes.object,
    selectedOption: PropTypes.object,
    verticalMode: PropTypes.bool,
    setAnchorRef: PropTypes.func,
    classes: PropTypes.object,
    optionListVisible: PropTypes.bool,
    onCloseSelected: PropTypes.func,
};

export const StyledProductPart = withStyles(
    theme => {
        const captionMaxHeight = `calc(${theme.creator.productPart.captionPaddingTop} + ${theme.creator.productPart.lineHeight} * 2)`;
        const iconMaxHeigth = `calc(${theme.creator.productPart.itemSize} - ${captionMaxHeight})`;

        const iconSizeWithoutMarker = `calc(${theme.creator.productPart.itemSize})`;

        return {
            root: {
                [theme.breakpoints.up('sm')]: {
                    width: theme.creator.productPart.selectedItemSize,
                },
                width: theme.creator.productPart.itemSize,
                height: 'auto',

                '&.horizontal': {
                    padding: '0 10px',
                },
                '&.vertical': {
                    marginLeft: 'auto',
                    display: 'flex',
                    flexDirection: 'row-reverse',
                },
                tapHighlightColor: theme.tapHighlightColor,
            },
            content: {
                alignItems: 'center',
                display: 'flex',
                flexDirection: 'column',
                cursor: 'pointer',
                textAlign: 'center',
                position: 'relative',

                '&.horizontal': {
                    padding: theme.spacing(1, 0, 0, 0),
                    width: theme.creator.productPart.itemSize,
                    height: 'auto',
                    whiteSpace: 'normal',
                    '& span': {
                        marginBottom: 0,
                    },
                    [theme.breakpoints.down('xs')]: {
                        padding: theme.spacing(0.5, 0, 0, 0),
                    },
                },
                '&.vertical': {
                    padding: theme.spacing(0, 0, 1, 0),
                    width: iconSizeWithoutMarker,
                    margin: 0,
                },
            },
            icon: {
                maxHeight: iconMaxHeigth,
                backgroundPosition: 'center',
                backgroundRepeat: 'no-repeat',
                backgroundSize: 'contain',
                display: 'block',
                '&.horizontal': {
                    width: theme.creator.productPart.itemSize,
                    height: 'calc(0.75*' + theme.creator.productPart.itemSize + ')',
                    [theme.breakpoints.down('xs')]: {
                        maxHeight: `calc(0.75 * ${iconMaxHeigth})`,
                    },
                },
                '&.vertical': {
                    width: iconSizeWithoutMarker,
                    height: 'calc(0.75*' + iconSizeWithoutMarker + ')',
                },
            },
            marker: {
                backgroundColor: 'transparent',
                '&.horizontal': {
                    width: theme.creator.productPart.itemSize,
                    height: theme.creator.productPart.markerThickness,
                },
                '&.vertical': {
                    width: theme.creator.productPart.markerThickness,
                    margin: theme.spacing(0, 0, 1, 0),
                },
                '&.selected': {
                    [theme.breakpoints.down('sm')]: {
                        marginBottom: 4,
                    },
                    [theme.breakpoints.down('xs')]: {
                        marginBottom: 0,
                    },
                    backgroundColor: theme.palette.primary.main,
                },
            },
            rootTypography: {
                paddingTop: theme.creator.productPart.captionPaddingTop,
                display: '-webkit-box',
                overflow: 'hidden',
                wordWrap: 'break-word',
                maxWidth: theme.creator.productPart.itemSize,
                lineHeight: theme.creator.productPart.lineHeight,
                boxOrient: 'vertical',
                lineClamp: 3,
                minHeight: 20,
            },
        };
    },
    { name: 'ProductPart' }
)(ProductPart);

export default StyledProductPart;
