import React from 'react';
import PropTypes from 'prop-types';
import withListener from '../withListener';
import { createNamespace } from '../../tools/namingTools';
import { generateUniqueID } from '../../tools/helpers';
import BundleLogo from '../../atoms/bundle-logo/BundleLogo';
import { MEDIUM, LARGE } from '../../constants/sizes';
import './styles/ProductBundleDescription.scss';
import { lowerFirst } from '../../tools/stringTools';

const n = createNamespace('ProductBundleDescription');

const renderBundle = item => {
    if (!item.card) {
        return null;
    }

    return (
        <li {...n('bundleCard').withTestId().props} key={generateUniqueID([item.id, item.card.title])}>
            <BundleLogo data={item.card} />
        </li>
    );
};

export const ProductBundleDescriptionComponent = ({
    data: {
        overview,
        items,
        textSize,
        i18n
    }
}) => {
    if (!overview) {
        return null;
    }
    const i18nWithDefaults = { ...ProductBundleDescriptionComponent.defaultProps.data.i18n, ...i18n };

    const { title, description } = overview;
    return (
        <div {...n('wrapper').props}>
            {title && <h2 {...n('title').withTestId().props}>{title}</h2>}
            {description && (
                <p {...n('description', lowerFirst(textSize)).withTestId().props} dangerouslySetInnerHTML={{ __html: description }} />
            )}
            {items && items.length ? (
                <div {...n('bundleWrapper').props}>
                    <div {...n('subtitle').withTestId().props}>{i18nWithDefaults.bundleIncludes}</div>
                    <ul {...n('bundleList').withTestId().props} aria-label={i18nWithDefaults.bundles}>
                        {items.map(item => renderBundle(item))}
                    </ul>
                </div>
            ) : ''}
        </div>
    );
};

export const bundleLogoShape = PropTypes.shape({
    id: PropTypes.number,
    card: PropTypes.shape({
        title: PropTypes.string,
        logoSrc: PropTypes.string,
        logoSrcset: PropTypes.shape({
            default: PropTypes.string
        })
    })
});

const TEXT_SIZE_OPTIONS = [MEDIUM, LARGE];

ProductBundleDescriptionComponent.schema = () => ({
    name: 'ProductBundleDescription',
    title: 'uieditor.sfbComponent.productBundleDescription.title',
    iconName: '',
    form: {
    },
    marketplaceData: {
        overview: 'bundle.overview',
        items: 'bundle.items',
        i18n: 'bundle.i18n'
    }
});

ProductBundleDescriptionComponent.propTypes = {
    data: PropTypes.shape({
        overview: PropTypes.shape({
            description: PropTypes.string,
            title: PropTypes.string
        }),
        items: PropTypes.arrayOf(bundleLogoShape),
        textSize: PropTypes.oneOf(TEXT_SIZE_OPTIONS),
        i18n: PropTypes.shape({
            bundleIncludes: PropTypes.string,
            bundles: PropTypes.string
        })
    })
};

ProductBundleDescriptionComponent.defaultProps = {
    data: {
        overview: {},
        items: [],
        textSize: TEXT_SIZE_OPTIONS[0].value,
        i18n: {
            bundleIncludes: 'Bundle Package Includes',
            bundles: 'Bundles'
        }
    }
};

export default withListener(ProductBundleDescriptionComponent);
