import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../../../../tools/namingTools';
import { generateUniqueID } from '../../../../../tools/helpers';
import { getPropValue } from '../../../../../tools/objectTools';
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';
// IMPORTANT: (s)css should be imported after other atoms/components
import './styles/FooterSocials.scss';

const n = createNamespace('FooterSocials');

const FooterSocials = ({
    items: socialIcons,
    i18n,
    showTitle,
    showCustomIcon,
    iconAlign
}) => {
    if (!socialIcons || !socialIcons.length) {
        return null;
    }
    const renderIcon = ({ label, icon, isVisible, values }, index) => {
        if (!values) { return null; }
        const { accountLink = {}, uploadIcon = {} } = values;
        const { value: url } = accountLink;
        const iconSrc = getPropValue(uploadIcon, 'value.url');
        const displayCustomIcon = showCustomIcon && iconSrc;
        const displayDefaultIcon = !!icon;
        const displayIcon = displayCustomIcon || displayDefaultIcon;

        /**
         * Special logic to handle Twitter re-branding to X
         * This is to ensure older Storefronts that have Twitter will display the X logo.
         * See: https://appdirect.jira.com/browse/UPL-3816
         */
        const alt = icon === 'twitter' ? 'X' : label;
        const iconType = icon === 'twitter' ? 'x' : icon;
        const href = icon === 'twitter' ? 'https://www.x.com' : url;

        const iconProps = {
            ...n('link').props,
            alt,
            href,
            icon: iconType,
            iconSrc: showCustomIcon ? iconSrc : '',
            iconClass: n('icon').props.className,
            target: TARGET_BLANK,
            hiddenText: true
        };

        return isVisible && displayIcon && (
            <li {...n('item').withTestId().props} key={generateUniqueID([label, url, index])}>
                <Link {...iconProps}>{label}</Link>
            </li>
        );
    };

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