import React from 'react';
import PropTypes from 'prop-types';
import withListener from '../withListener';
import { createNamespace } from '../../tools/namingTools';
import Button from '../../atoms/button/Button';
import Image from '../../atoms/image/Image';
import { LEFT, RIGHT } from '../../constants/alignment';
import { isContentFromOneWorldSync } from '../../tools/contentTools';
import { getImageSrc } from '../../tools/images';
// IMPORTANT: (s)css should be imported after other atoms/components
import './styles/BundleSummary.scss';

const n = createNamespace('BundleSummary');

export const BOX_SHADOW_DIMENSIONS = '0 5px 10px 5px';

export const BundleSummaryComponent = ({
    data: {
        overview: {
            title,
            description,
            image,
            imageSrcSet,
            imageAlt
        },
        url,
        referUrl,
        i18n
    },
    settings
}) => {
    const { imagePosition, isDisplayShadow, shadowFill } = settings;
    const rowModifiers = [
        imagePosition && `image-${imagePosition}`
    ];

    const boxShadow = `${BOX_SHADOW_DIMENSIONS} ${shadowFill}`;
    const imageStyle = {};
    if (isDisplayShadow) {
        imageStyle.boxShadow = boxShadow;
    }

    const i18nWithDefaults = { ...BundleSummaryComponent.defaultProps.data.i18n, ...i18n };

    return (
        <div {...n('container').withTestId().props}>
            <div {...n('row', rowModifiers).withTestId().props}>
                <div {...n('content').props}>
                    <h1 {...n('title', 'hidden').withTestId().props}>{title}</h1>
                    <p {...n('description').withTestId().props}>{description}</p>
                    <div {...n('buttons').props}>
                        <Button type="primary" size="small" url={url}>
                            {i18nWithDefaults.viewProduct}
                        </Button>
                    </div>
                </div>
                {image && (
                    <div {...n('imageContainer').props}>
                        <Image
                            {...n('image').withTestId().props}
                            src={getImageSrc(image, imageSrcSet)}
                            alt={imageAlt}
                            style={imageStyle}
                            isCopyRighted={isContentFromOneWorldSync(referUrl)}
                        />
                    </div>
                )}
            </div>
        </div>
    );
};

const IMAGE_POSITION_OPTIONS = [LEFT.value, RIGHT.value];

export const bundleSummaryShape = {
    title: PropTypes.string,
    description: PropTypes.string,
    image: PropTypes.string,
    imageSrcSet: PropTypes.shape({
        default: PropTypes.string,
        '2x': PropTypes.string
    }),
    imageAlt: PropTypes.string
};

BundleSummaryComponent.propTypes = {
    data: PropTypes.shape({
        overview: PropTypes.shape(bundleSummaryShape),
        url: PropTypes.string,
        referUrl: PropTypes.string,
        i18n: PropTypes.shape({
            viewProduct: PropTypes.string
        })
    }),
    settings: PropTypes.shape({
        imagePosition: PropTypes.oneOf(IMAGE_POSITION_OPTIONS),
        isDisplayShadow: PropTypes.bool,
        shadowFill: PropTypes.string
    })
};

BundleSummaryComponent.defaultProps = {
    data: {
        overview: {
            title: '',
            description: '',
            image: '',
            imageSrcSet: null,
            imageAlt: ''
        },
        url: '',
        referUrl: '',
        i18n: {
            viewProduct: 'View Product'
        }
    },
    settings: {
        imagePosition: 'right',
        isDisplayShadow: false,
        shadowFill: ''
    }
};

export default withListener(BundleSummaryComponent);
