import React from 'react';
import PropTypes from 'prop-types';
import './styles/ProductPlan.scss';
import withListener from '../withListener';
import Bullet from '../../atoms/bullet/Bullet';
import { createNamespace } from '../../tools/namingTools';
import { generateUniqueID } from '../../tools/helpers';

const n = createNamespace('ProductPlan');

export const ProductPlanComponent = ({
    data: {
        bullets,
        footnotes,
        i18n
    }
}) => {
    const i18nWithDefaults = { ...ProductPlanComponent.defaultProps.data.i18n, ...i18n };
    const hasBullets = bullets && bullets.length;
    const hasFootnotes = footnotes && footnotes.length;
    const bulletModifiers = [hasFootnotes && 'with-footnotes'];
    const footnoteModifers = [hasBullets && 'with-bullets'];

    if (!hasBullets && !hasFootnotes) {
        return null;
    }

    const renderBullet = (item, index) => {
        if (!item.content) {
            return null;
        }

        const { content } = item;
        const uid = generateUniqueID([content.substring(0, 4), index]);

        return (
            <li {...n('bullet', bulletModifiers).withTestId().withE2EId().props} key={uid}>
                <Bullet content={content} iconType="check" />
            </li>
        );
    };

    const renderFootnote = (item, index) => {
        const uid = generateUniqueID([item.substring(0, 4), index]);

        return (
            <p {...n('footnote').withTestId().props} key={uid}>{item}</p>
        );
    };

    return (
        <div {...n('container').props}>
            <div {...n('row').props}>
                {bullets && !!bullets.length && (
                    <div {...n('bullets', bulletModifiers).withTestId().withE2EId().props}>
                        {i18nWithDefaults.bulletsHeader && <h2 {...n('title').withE2EId().props}>{i18nWithDefaults.bulletsHeader}</h2>}
                        <ul {...n('bulletList').props}>
                            {bullets.map(renderBullet)}
                        </ul>
                    </div>
                )}
                {hasFootnotes ? (
                    <div {...n('footnotes', footnoteModifers).withTestId().props}>
                        <h2 {...n('title').props}>{i18nWithDefaults.footnotes}</h2>
                        {footnotes.map(renderFootnote)}
                    </div>
                ) : null}
            </div>
        </div>
    );
};

ProductPlanComponent.schema = () => ({
    name: 'ProductPlan',
    title: 'uieditor.sfbComponent.productPlan.title',
    iconName: '',
    form: {}
});

ProductPlanComponent.propTypes = {
    data: PropTypes.shape({
        bullets: PropTypes.arrayOf(PropTypes.shape({
            content: PropTypes.string
        })),
        footnotes: PropTypes.arrayOf(PropTypes.string),
        i18n: PropTypes.shape({
            bulletsHeader: PropTypes.string,
            footnotes: PropTypes.string
        })
    })
};

ProductPlanComponent.defaultProps = {
    data: {
        bullets: [],
        footnotes: [],
        i18n: {
            bulletsHeader: 'All Plans Include',
            footnotes: 'Notes'
        }
    }
};

export default withListener(ProductPlanComponent);
