import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../../../../tools/namingTools';
import { generateUniqueID } from '../../../../../tools/helpers';
import { getSocialIconsWithLink } from '../../../../../tools/footerHelpers';
import { TARGET_BLANK } from '../../../../../constants/buttons';
import { LEFT, RIGHT } from '../../../../../constants/alignment';
import { footerSocialPropTypes, i18nFooterSocialPropTypes } from '../../../../../constants/components/prop-types/footer';
import Link from '../../../../../atoms/link/Link';

import './styles/FooterSocials.scss';

const n = createNamespace('FooterSocials');

const FooterSocials = ({
    items,
    i18n,
    showTitle,
    showCustomIcon,
    iconAlign
}) => {
    // Remove social networks without links
    const socialIcons = getSocialIconsWithLink(items);

    if (!socialIcons || !socialIcons.length) {
        return null;
    }

    const renderIcon = ({ name, logoSrc, url, title }) => {
        const iconProps = {
            ...n('link').props,
            alt: title,
            href: url,
            icon: name,
            iconSrc: showCustomIcon ? logoSrc : '',
            iconClass: n('icon').props.className,
            target: TARGET_BLANK,
            hiddenText: true
        };

        return (
            <li {...n('item').withTestId().props} key={generateUniqueID([name, url])}>
                <Link {...iconProps}>{title}</Link>
            </li>
        );
    };

    return (
        <div {...n('wrapper').props}>
            {showTitle && (
                <span {...n('title').props}>{i18n.followUs}</span>
            )}
            <ul {...n('list', [iconAlign && `align-${iconAlign}`]).props}>
                {socialIcons.map(renderIcon)}
            </ul>
        </div>
    );
};

FooterSocials.propTypes = {
    ...footerSocialPropTypes,
    ...i18nFooterSocialPropTypes,
    ...{
        showTitle: PropTypes.bool,
        showCustomIcon: PropTypes.bool,
        iconAlign: PropTypes.oneOf([LEFT.value, RIGHT.value])
    }
};

FooterSocials.defaultProps = {
    items: null,
    showTitle: true,
    showCustomIcon: false,
    iconAlign: null,
    i18n: {
        followUs: 'Follow Us'
    }
};

export default FooterSocials;
