import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../../../../tools/namingTools';
import { useResponsive } from '../../../../../tools/widths/useResponsive';
import { LEFT, RIGHT } from '../../../../../constants/alignment';
import { hasSocialNetworks } from '../../../../../tools/footerHelpers';
import { getLogoAlt } from '../../../../../tools/themeSettings';
import { footerDataPropTypes, footerSettingsPropTypes } from '../../../../../constants/components/prop-types/footer';
import { menusPropTypes } from '../../../../../constants/components/prop-types/menu';
import FooterLogo from '../../../../../atoms/logo/Logo';
import BottomBarMenu from '../../common/bottom-bar-menu/BottomBarMenu';
import FooterSocials from '../../common/footer-socials/FooterSocials';
import FooterNewsletter from '../../common/footer-newsletter/FooterNewsletter';
import FooterCopyright from '../../common/footer-copyright/FooterCopyright';
import FooterMenu from '../../common/footer-menu/FooterMenu';
import { NO_LOGO } from '../../../../../constants/logo';
import './styles/FooterNewsletterSocial.scss';

const n = createNamespace('FooterNewsletterSocial');

const FooterNewsletterSocial = ({
    data = {},
    settings = {},
    menus = {}
}) => {
    const { xxLargeUp } = useResponsive();

    const {
        logo,
        marketplaceName,
        i18n
    } = data;

    const {
        socials,
        copyright,
        selectedLogo,
        logoSize,
        newsletterLogoPosition,
        displayNavSeparator,
        displaySocialMedia,
        displayDefaultSocialIcons,
        newsletterTitle: settingNewsletterTitle,
        newsletterText: settingNewsletterText,
        newsletterButtonLabel: settingNewsletterButtonLabel,
        newsletterButtonLink: settingNewsletterButtonLink,
        newsletterButtonStyle: settingNewsletterButtonStyle,
        newsletterSocialPosition: settingNewsletterSocialPosition
    } = settings;

    const footerMenu = menus?.FOOTER_MENU?.menu;
    const bottomBarMenu = menus?.BOTTOM_BAR_MENU?.menu;

    const showFooterMenu = Boolean(footerMenu?.length);
    const showBottomBarMenu = Boolean(bottomBarMenu?.length);

    const showSocials = displaySocialMedia && hasSocialNetworks(socials);
    const renderNewsletterBlock = () => {
        const props = {
            url: settingNewsletterButtonLink,
            buttonTheme: settingNewsletterButtonStyle,
            i18n: {
                newsletterTitle: settingNewsletterTitle,
                newsletterDescription: settingNewsletterText,
                newsletterButtonLabel: settingNewsletterButtonLabel
            }
        };

        return (
            <div {...n('newsletter').props}>
                <FooterNewsletter {...props} />
            </div>
        );
    };

    const renderSocialBlock = () => {
        const props = {
            ...socials,
            ...{
                i18n,
                showCustomIcon: !displayDefaultSocialIcons
            }
        };

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

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

    const renderFooterMenu = () => {
        const props = {
            i18n,
            menu: footerMenu,
            ...{
                navAlign: xxLargeUp && settingNewsletterSocialPosition === LEFT.value ? RIGHT.value : null
            }
        };

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

    const renderBottomBarMenu = () => {
        const props = {
            ...data,
            menu: bottomBarMenu,
            withSeparator: displayNavSeparator
        };

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

    return (
        <div {...n('wrapper').props}>
            <div {...n('section', 'top').props}>
                <div {...n('row').props}>
                    {showFooterMenu && (
                        <div {...n('col', 'menu').props}>
                            {renderFooterMenu()}
                        </div>
                    )}
                    <div {...n('col', ['socials', settingNewsletterSocialPosition && `align-${settingNewsletterSocialPosition}`]).props}>
                        <div {...n('newsletterSocials').props}>
                            {renderNewsletterBlock()}
                            {showSocials && renderSocialBlock()}
                        </div>
                    </div>
                </div>
            </div>
            <div {...n('section', 'bottom').props}>
                <div {...n('row', 'bottom').props}>
                    {showBottomBarMenu && (
                        <div {...n('col', 'nav').props}>
                            {renderBottomBarMenu()}
                        </div>
                    )}
                    {copyright && (
                        <div {...n('col', 'copyright').props}>
                            {renderCopyrightBlock()}
                        </div>
                    )}
                    {selectedLogo !== NO_LOGO && (
                        <div {...n('col', ['logo', newsletterLogoPosition && `align-${newsletterLogoPosition}`]).props}>
                            <div {...n('logo').props}>
                                <FooterLogo
                                    defaultLogo={logo}
                                    selectedLogo={selectedLogo}
                                    url="/"
                                    alt={getLogoAlt(selectedLogo) || marketplaceName || ''}
                                    width={logoSize}
                                />
                            </div>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
};

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

FooterNewsletterSocial.defaultProps = {
    data: {},
    settings: {},
    menus: {}
};

export default FooterNewsletterSocial;
