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, LARGE } from '../../../constants/sizes';
import { horizontalStylePropTypes, horizontalStyleDefaultProps } from '../../../constants/atoms/prop-types/product-groups-tiles';
import { createNamespace } from '../../../tools/namingTools';
import { HORIZONTAL_STYLE_WIDTHS,
    HORIZONTAL_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/HorizontalStyle.scss';

const n = createNamespace('HorizontalStyle');

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

    const { mediumDown: isMobile } = useResponsive();
    const widthsToUse = isMobile ? HORIZONTAL_STYLE_WIDTHS_MOBILE_MEDIUM_DOWN : HORIZONTAL_STYLE_WIDTHS;

    // on mobile, scale large to a medium
    const mobileSizeLarge = isMobile && size === LARGE.value;

    const shadowModifier = onHoverShadowOnly ? ON_HOVER : '';
    const borderModifier = onHoverBorderOnly ? ON_HOVER : '';
    const imageUrl = customImage.defaultValue?.url || customImage.url;

    // on mobile, button should be small, for all sizes
    const buttonSize = (size === SMALL.value || isMobile) ? SMALL.value : 'default';

    const cardStyleVariables = {
        'text-alignment': textAlignment,
        'button-alignment': buttonAlignment,
        'background-color': cardBackgroundColor,
        'card-corner-radius': `${cardCornerRadius}px`,
        'image-corner-radius': `${imageCornerRadius}px`,
        'card-border-color': cardBorderColor,
        'image-background-color': imageBackgroundColor,
        'title-color': titleColor,
        'description-color': descriptionColor,
        'shadow-color': shadowColor,
        'tile-width': `${widthsToUse[size]}px`
    };

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

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

    const groupTitleModifiers = [
        size && `group-title-${size}`,
        mobileSizeLarge && 'mobile-size-large'
    ];

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

    const groupWrapperModifiers = [
        size && `padding-${size}`,
        mobileSizeLarge && 'mobile-size-large'
    ];

    const buttonModifiers = [
        mobileSizeLarge && 'mobile-size-large'
    ];

    useEffect(() => {
        setItemWidth && setItemWidth(widthsToUse[size]);
    }, [widthsToUse, 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', buttonModifiers).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>
    );
};

HorizontalStyle.propTypes = horizontalStylePropTypes;

HorizontalStyle.defaultProps = horizontalStyleDefaultProps;

export default HorizontalStyle;
