import React, { useEffect, useRef } 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 { cardStylePropTypes, cardStyleDefaultProps } from '../../../constants/atoms/prop-types/product-groups-tiles';
import getImageMask from '../../../tools/mask';
import { createNamespace } from '../../../tools/namingTools';
import { CARD_STYLE_WIDTHS,
    CARD_STYLE_WIDTHS_MOBILE_MEDIUM_DOWN,
    ON_HOVER } from '../../../constants/atoms/product-groups-tiles';
import { useResponsive } from '../../../tools/widths/useResponsive';
// IMPORTANT: (s)css should be imported after other atoms/components
import './styles/CardStyle.scss';

const n = createNamespace('CardStyle');

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

    const { mediumDown: isMobile } = useResponsive();
    const widthsToUse = isMobile ? CARD_STYLE_WIDTHS_MOBILE_MEDIUM_DOWN : CARD_STYLE_WIDTHS;

    const imageRef = useRef();
    const maskValue = getImageMask(imageMask, imageRef);
    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,
        'upper-title-alignment': upperTitleAlignment,
        'button-alignment': buttonAlignment,
        'background-color': cardBackgroundColor,
        'image-mask': maskValue,
        'card-corner-radius': `${cardCornerRadius}px`,
        'image-corner-radius': `${imageCornerRadius}px`,
        'card-border-color': cardBorderColor,
        'image-background-color': imageBackgroundColor,
        'upper-title-color': upperTitleColor,
        'title-color': titleColor,
        'description-color': descriptionColor,
        'shadow-color': shadowColor,
        'tile-width': `${widthsToUse[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(widthsToUse[size]);
    }, [widthsToUse, size]);

    return (
        <a
            href={useCustomLink ? customLink : `${window.location.origin}${link}`}
            aria-label={i18n?.ariaLabel}
            {...(openInNewTab && { target: '_blank', rel: 'noreferrer' })}
            {...n('wrapper', wrapperModifiers).withVariables(cardStyleVariables).props}
        >
            { displayUpperTitle && size !== SMALL.value && (
                <div {...n('upperTitle').withE2EId().props}>
                    {upperTitle}
                </div>
            )}
            <div {...n('image', imageModifiers).withE2EId().props} ref={imageRef}>
                {
                    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>
    );
};

CardStyle.propTypes = cardStylePropTypes;

CardStyle.defaultProps = cardStyleDefaultProps;

export default CardStyle;
