import React, { 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 { KEY_VALUE } from '../../../constants/keyCodes';
import { TYPE_BUTTON } from '../../../constants/buttons';
import { cardStylePropTypes, cardStyleDefaultProps } from '../../../constants/atoms/prop-types/product-group-tiles';

import getImageMask from '../../../tools/mask';
import defaultImageBase64 from '../../../tools/defaultImageBase64';
import { createNamespace } from '../../../tools/namingTools';

import './styles/CardStyle.scss';

const n = createNamespace('CardStyle');

const ON_HOVER = '-on-hover';

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,
        customLink,
        upperTitleColor,
        titleColor,
        descriptionColor,
        shadowColor,
        defaultValues
    } = props;

    const imageRef = useRef();
    const maskValue = getImageMask(imageMask, imageRef);
    const upperTitleValue = upperTitle || defaultValues?.upperTitle;
    const titleValue = title || defaultValues?.title;
    const descriptionValue = description || defaultValues?.description;
    const buttonLabelValue = buttonLabel || defaultValues?.buttonLabel;
    const shadowModifier = onHoverShadowOnly ? ON_HOVER : '';
    const borderModifier = onHoverBorderOnly ? ON_HOVER : '';
    const imageUrl = customImage?.url || defaultValues?.customImage?.url || defaultImageBase64;
    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
    };
    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}`
    ];

    const onMouseClickRedirect = () => {
        window.location.href = customLink;
    };

    const onEnterClickRedirect = e => {
        if (e.key === KEY_VALUE.return) {
            e.preventDefault();
            window.location.href = customLink;
        }
    };

    return (
        <button
            // eslint-disable-next-line react/button-has-type
            type={TYPE_BUTTON}
            onClick={onMouseClickRedirect}
            onKeyDown={onEnterClickRedirect}
            aria-label="button"
            {...n('wrapper', wrapperModifiers).withVariables(cardStyleVariables).props}
        >
            { displayUpperTitle && size !== SMALL.value && (
                <div {...n('upperTitle').props}>
                    {upperTitleValue}
                </div>
            )}
            <div {...n('image', imageModifiers).props} ref={imageRef}>
                <Image
                    src={imageUrl}
                />
            </div>
            <div {...n('groupWrapper', groupWrapperModifiers).props}>
                { displayTitle && (
                    <div {...n('title', groupTitleModifiers).props}>
                        {titleValue}
                    </div>
                )}
                { displayDescription && (
                    <div {...n('description', groupDescriptionModifiers).props}>
                        {descriptionValue}
                    </div>
                )}
                { displayButton && (
                    <div {...n('button').props}>
                        <Button
                            type={buttonType !== LINK.value ? buttonType : PRIMARY.value}
                            buttonType={buttonType !== LINK.value ? 'button' : LINK.value}
                            size={buttonSize}
                            renderAsDiv
                        >
                            { buttonLabelValue }
                            { buttonType === LINK.value && <Icon type="caretRight" {...n('iconLink').props} /> }
                        </Button>
                    </div>
                )}
            </div>
        </button>
    );
};

CardStyle.propTypes = cardStylePropTypes;

CardStyle.defaultProps = cardStyleDefaultProps;

export default CardStyle;
