import React from 'react';
import PropTypes from 'prop-types';
import withListener from '../withListener';
import { createNamespace } from '../../tools/namingTools';
import { MEDIUM, LARGE } from '../../constants/sizes';
import { DROPDOWN, TOGGLE } from '../../constants/schemaComponentTypes';
import Image from '../../atoms/image/Image';
import ProductBundleDescription, { bundleLogoShape } from '../product-bundle-description/ProductBundleDescription';
import './styles/ProductBundleViewer.scss';

const n = createNamespace('ProductBundleViewer');

export const ProductBundleViewerComponent = ({
    data: {
        overview,
        items
    },
    settings
}) => {
    const settingsWithDefaults = { ...ProductBundleViewerComponent.defaultProps.settings, ...settings };
    const { hasOverviewImage, textSize } = settingsWithDefaults;

    if (!overview) {
        return null;
    }

    const { image: overviewImage, title: overviewTitle, imageSrcSet } = overview;

    const shouldDisplayOverviewImage = Boolean(overviewImage && hasOverviewImage);

    return (
        <section {...n('container').withTestId().props}>
            <div {...n('row').props}>
                {shouldDisplayOverviewImage && (
                    <div {...n('imageViewer').withTestId().props}>
                        <Image
                            src={overviewImage}
                            srcSet={imageSrcSet}
                            alt={overviewTitle}
                            {...n('image').withTestId().props}
                        />
                    </div>
                )}
                <div {...n('description').withTestId().props}>
                    <ProductBundleDescription data={{ overview, items, textSize }} />
                </div>
            </div>
        </section>
    );
};

const TEXT_SIZE_OPTIONS = [MEDIUM, LARGE];

ProductBundleViewerComponent.schema = () => ({
    name: 'ProductBundleViewer',
    title: 'uieditor.sfbComponent.productBundleViewer.title',
    iconName: 'text',
    form: {
        textSize: {
            title: 'uieditor.sfbComponent.productBundleViewer.textSize.title',
            type: DROPDOWN,
            defaultValue: TEXT_SIZE_OPTIONS[0].value,
            options: TEXT_SIZE_OPTIONS
        },
        hasOverviewImage: {
            labelOn: 'uieditor.sfbComponent.productBundleViewer.hasOverviewImage.labelOn',
            labelOff: 'uieditor.sfbComponent.productBundleViewer.hasOverviewImage.labelOff',
            type: TOGGLE,
            defaultValue: true
        }
    },
    marketplaceData: {
        overview: 'bundle.overview',
        items: 'bundle.items'
    }
});

ProductBundleViewerComponent.propTypes = {
    data: PropTypes.shape({
        overview: PropTypes.shape({
            description: PropTypes.string,
            image: PropTypes.string,
            imageSrcSet: PropTypes.shape({
                default: PropTypes.string,
                '1x': PropTypes.string,
                '2x': PropTypes.string
            }),
            title: PropTypes.string
        }),
        items: PropTypes.arrayOf(bundleLogoShape)
    }),
    settings: PropTypes.shape({
        textSize: PropTypes.oneOf(TEXT_SIZE_OPTIONS),
        hasOverviewImage: true
    })
};

ProductBundleViewerComponent.defaultProps = {
    data: {
        overview: {
            description: '',
            image: '',
            title: ''
        },
        items: []
    },
    settings: {
        textSize: TEXT_SIZE_OPTIONS[0].value,
        hasOverviewImage: true
    }
};

export default withListener(ProductBundleViewerComponent);
