import React, { useEffect } from 'react';
import Image from '../../image/Image';
import Button from '../../button/Button';
import Icon from '../../icon/Icon';
import { PRIMARY, LINK } from '../../../constants/components/schemas/button-types';
import { SMALL } from '../../../constants/sizes';
import { graphicStylePropTypes, graphicStyleDefaultProps } from '../../../constants/atoms/prop-types/product-groups-tiles';
import { createNamespace } from '../../../tools/namingTools';
import { GRAPHIC_STYLE_WIDTHS, ON_HOVER } from '../../../constants/atoms/product-groups-tiles';
// IMPORTANT: (s)css should be imported after other atoms/components
import './styles/GraphicStyle.scss';

const n = createNamespace('GraphicStyle');

const GraphicStyle = props => {
    const {
        size,
        customImage,
        imageSize,
        imageBackgroundColor,
        buttonAlignment,
        textAlignment,
        displayTitle,
        displayDescription,
        displayButton,
        buttonType,
        imageCornerRadius,
        cardBorderColor,
        displayShadow,
        displayBorder,
        onHoverShadowOnly,
        onHoverBorderOnly,
        title,
        description,
        buttonLabel,
        link,
        customLink,
        useCustomLink,
        titleColor,
        descriptionColor,
        shadowColor,
        setItemWidth,
        i18n,
        openInNewTab
    } = props;

    const shadowModifier = onHoverShadowOnly ? ON_HOVER : '';
    const borderModifier = onHoverBorderOnly ? ON_HOVER : '';
    const imageUrl = customImage.defaultValue?.url || customImage.url;
    const buttonSize = size === SMALL.value ? SMALL.value : 'default';
    const cardStyleVariables = {
        'text-alignment': textAlignment,
        'button-alignment': buttonAlignment,
        'image-corner-radius': `${imageCornerRadius}%`,
        'card-border-color': cardBorderColor,
        'image-background-color': imageBackgroundColor,
        'title-color': titleColor,
        'description-color': descriptionColor,
        'shadow-color': shadowColor,
        'tile-width': `${GRAPHIC_STYLE_WIDTHS[size]}px`
    };

    const imageModifiers = [
        size && `size-${size}`,
        imageSize && `image-${imageSize}`
    ];

    const wrapperModifiers = [
        size && `size-${size}`,
        displayShadow && `shadow${shadowModifier}`,
        displayBorder && `border${borderModifier}`
    ];

    const groupTitleModifiers = [
        size && `group-title-${size}`
    ];

    const groupDescriptionModifiers = [
        size && `group-description-${size}`
    ];

    const groupWrapperModifiers = [
        size && `padding-${size}`
    ];

    useEffect(() => {
        setItemWidth && setItemWidth(GRAPHIC_STYLE_WIDTHS[size]);
    }, [size]);

    return (
        <a
            href={useCustomLink ? customLink : `${window.location.origin}${link}`}
            {...(openInNewTab && { target: '_blank', rel: 'noreferrer' })}
            aria-label={i18n?.ariaLabel}
            {...n('wrapper', wrapperModifiers).withVariables(cardStyleVariables).props}
        >
            <div {...n('image', imageModifiers).withE2EId().props}>
                {
                    imageUrl
                        ? <Image src={imageUrl} />
                        : <Icon {...n('defaultImage', imageModifiers).withTestId().props} type="image" width="64px" />
                }
            </div>
            <div {...n('groupWrapper', groupWrapperModifiers).withE2EId().props}>
                { displayTitle && (
                    <div {...n('title', groupTitleModifiers).withE2EId().props}>
                        {title}
                    </div>
                )}
                { displayDescription && (
                    <div {...n('description', groupDescriptionModifiers).withE2EId().props}>
                        {description}
                    </div>
                )}
                { displayButton && (
                    <div {...n('button').withE2EId().props}>
                        <Button
                            type={buttonType !== LINK.value ? buttonType : PRIMARY.value}
                            buttonType={buttonType !== LINK.value ? 'button' : LINK.value}
                            size={buttonSize}
                            renderAsDiv
                        >
                            { buttonLabel }
                            { buttonType === LINK.value && <Icon type="caretRight" {...n('iconLink').props} /> }
                        </Button>
                    </div>
                )}
            </div>
        </a>
    );
};

GraphicStyle.propTypes = graphicStylePropTypes;

GraphicStyle.defaultProps = graphicStyleDefaultProps;

export default GraphicStyle;
