import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../../../../tools/namingTools';
import { useResponsive } from '../../../../../tools/widths/useResponsive';
import { TOP_LEFT, BOTTOM_LEFT, RIGHT } from '../../../../../constants/alignment';
import { hasMenu, hasSocialNetworks, hasLogo, hasNavigationBar } from '../../../../../tools/footerHelpers';
import { footerDataPropTypes, footerSettingsPropTypes } from '../../../../../constants/components/prop-types/footer';
import FooterLogo from '../../common/footer-logo/FooterLogo';
import FooterNavigation from '../../common/footer-navigation/FooterNavigation';
import FooterSocials from '../../common/footer-socials/FooterSocials';
import FooterCopyright from '../../common/footer-copyright/FooterCopyright';
import FooterMenu from '../../common/footer-menu/FooterMenu';

import './styles/FooterBottomBar.scss';

const n = createNamespace('FooterBottomBar');

const FooterBottomBar = ({
    data: {
        logo,
        locale,
        marketplaceName,
        i18n
    },
    settings
}) => {
    const { xxLargeUp } = useResponsive();

    const {
        menu,
        socials,
        copyright,
        navigation,
        displayLogo,
        logoPosition,
        displayLanguageSwitcher,
        displayNavSeparator,
        displaySocialMedia,
        socialIconPosition,
        displayDefaultSocialIcons
    } = settings;

    const showMenu = hasMenu(menu);
    const showNavigation = hasNavigationBar(navigation, locale);
    const showSocials = displaySocialMedia && hasSocialNetworks(socials);
    const showLogo = displayLogo && hasLogo(logo);

    const renderSocialBlock = () => {
        const props = {
            ...socials,
            ...{
                i18n,
                showTitle: false,
                showCustomIcon: !displayDefaultSocialIcons,
                iconAlign: xxLargeUp ? socialIconPosition : null
            }
        };

        return (
            <div {...n('socials').props}>
                <FooterSocials {...props} />
            </div>
        );
    };

    const renderCopyrightBlock = () => (
        <div {...n('copyright').props}>
            <FooterCopyright text={copyright} />
        </div>
    );

    const renderMenuBlock = () => {
        const isLogoLeftAligned = logoPosition === TOP_LEFT.value || logoPosition === BOTTOM_LEFT.value;
        const props = {
            ...menu,
            ...{
                navAlign: xxLargeUp && isLogoLeftAligned ? RIGHT.value : null
            }
        };

        return (
            <div {...n('menu').props}>
                <FooterMenu {...props} />
            </div>
        );
    };

    const renderNavigationBlock = () => {
        const props = {
            i18n,
            locale,
            navigation,
            withSeparator: displayNavSeparator,
            withLanguageSwitcher: displayLanguageSwitcher
        };

        return (
            <div {...n('nav').props}>
                <FooterNavigation {...props} />
            </div>
        );
    };

    return (
        <div {...n('wrapper').props}>
            <div {...n('section', 'top').props}>
                <div {...n('row').props}>
                    {showMenu && (
                        <div {...n('col', 'menu').props}>
                            {renderMenuBlock()}
                        </div>
                    )}
                    {showLogo && (
                        <div {...n('col', ['logo', logoPosition && `align-${logoPosition}`]).props}>
                            <div {...n('logo').props}>
                                <FooterLogo src={logo} url="/" alt={marketplaceName} />
                            </div>
                        </div>
                    )}
                </div>
            </div>
            <div {...n('section', 'bottom').props}>
                <div {...n('row', 'bottom').props}>
                    {showNavigation && (
                        <div {...n('col', 'nav').props}>
                            {renderNavigationBlock()}
                        </div>
                    )}
                    {copyright && (
                        <div {...n('col', 'copyright').props}>
                            {renderCopyrightBlock()}
                        </div>
                    )}
                    {showSocials && (
                        <div
                            {...n('col', [
                                'socials',
                                socialIconPosition && `align-${socialIconPosition}`,
                                socials.items.length > 4 && 'large'
                            ]).props}
                        >
                            {renderSocialBlock()}
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
};

FooterBottomBar.propTypes = {
    data: PropTypes.shape(footerDataPropTypes),
    settings: PropTypes.shape(footerSettingsPropTypes)
};

FooterBottomBar.defaultProps = {
    data: {},
    settings: {}
};

export default FooterBottomBar;
