import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../../../../tools/namingTools';
import { hasLanguageSwitch } from '../../../../../tools/footerHelpers';
import { localeShape } from '../../../../../constants/prop-types/config';
import { i18nBottomBarPropTypes } from '../../../../../constants/components/prop-types/footer';
import { menuPropTypes } from '../../../../../constants/components/prop-types/menu';
import LanguageSwitcher from '../../../../../atoms/language-switcher/LanguageSwitcher';
import './styles/BottomBarMenu.scss';

import LinkMenuItem from '../../../../../atoms/link-menu-item/LinkMenuItem';

const namespaceString = 'BottomBarMenu';
const n = createNamespace(namespaceString);

const updateLinkValue = (
    menuItem,
    support,
    termsAndConditionsUrl,
    privacyPolicyUrl
) => {
    const copyMenuItem = menuItem;
    switch (menuItem.editorType) {
        case 'CONTACT_US':
            copyMenuItem.link.value = `mailto:${support.email}`;
            break;
        case 'HELP_CENTER':
            copyMenuItem.link.value = support.url;
            break;
        case 'PRIVACY_POLICY':
            copyMenuItem.link.value = privacyPolicyUrl;
            break;
        case 'TERMS_AND_CONDITIONS':
            copyMenuItem.link.value = termsAndConditionsUrl;
            break;
        default:
            break;
    }
    return copyMenuItem;
};

const BottomBarMenu = ({
    i18n,
    locale,
    links,
    support,
    menu,
    termsAndConditionsUrl,
    privacyPolicyUrl,
    withSeparator,
    pageId
}) => {
    const showNavigation = Boolean(menu?.length);
    const showLanguageSwitch = hasLanguageSwitch(locale);

    const mainItemClass = 'col';
    const childItemListClass = 'sub-list';
    const subItemClass = 'sub-item';
    const menuItemModifiers = withSeparator && 'with-separator';

    const renderDefaultBottomBarMenu = () => {
        const defaultMenu = links.map((linkData, index) => {
            const menuItem = {
                title: {
                    value: linkData.label
                },
                link: {
                    value: linkData.href && index === 0 ? `mailto:${linkData.href}` : linkData.href
                },
                openInNewTab: true,
                isVisible: true,
                uuid: index
            };

            return (
                <LinkMenuItem
                    key={linkData.label}
                    menuItem={menuItem}
                    namespaceString={namespaceString}
                    mainItemClassNames={n(mainItemClass, menuItemModifiers).withTestId().props}
                    mainItemSubListClassNames={n(childItemListClass).withTestId().props}
                    childItemClassNames={n(subItemClass).withTestId().props}
                />
            );
        });

        return (
            <>
                {defaultMenu}
                {showLanguageSwitch && (
                    <div
                        {...n(mainItemClass, ['language', menuItemModifiers]).props}
                    >
                        <LanguageSwitcher {...locale} i18n={i18n} pageId={pageId} />
                    </div>
                )}
            </>
        );
    };

    const renderBottomBarMenu = () => {
        if (!showNavigation) {
            return renderDefaultBottomBarMenu();
        }

        return menu.map(menuItem => {
            if (menuItem.editorType === 'LANGUAGE') {
                return menuItem.isVisible && (
                    <div
                        key={menuItem.uuid}
                        {...n(mainItemClass, ['language', menuItemModifiers]).props}
                    >
                        <LanguageSwitcher {...locale} i18n={i18n} pageId={pageId} />
                    </div>
                );
            }
            const menuItemCopy = updateLinkValue(menuItem, support, termsAndConditionsUrl, privacyPolicyUrl);

            if (menuItemCopy.children) {
                // eslint-disable-next-line arrow-body-style
                menuItemCopy.children = menuItemCopy.children.map(child => {
                    return updateLinkValue(child, support, termsAndConditionsUrl, privacyPolicyUrl);
                });
            }

            return (
                <LinkMenuItem
                    key={menuItem.uuid}
                    menuItem={menuItemCopy}
                    namespaceString={namespaceString}
                    mainItemClassNames={n(mainItemClass, menuItemModifiers).withTestId().props}
                    mainItemSubListClassNames={n(childItemListClass).withTestId().props}
                    childItemClassNames={n(subItemClass).withTestId().props}
                />
            );
        });
    };

    return (
        <div {...n('wrapper').props}>
            <nav {...n('nav').props} aria-label={i18n.navigationTitle}>
                <div {...n('list').props}>
                    {renderBottomBarMenu()}
                </div>
            </nav>
        </div>
    );
};

BottomBarMenu.propTypes = {
    ...i18nBottomBarPropTypes,
    ...{
        locale: PropTypes.shape(localeShape),
        withSeparator: PropTypes.bool,
        menu: menuPropTypes,
        pageId: PropTypes.string
    }
};

BottomBarMenu.defaultProps = {
    languages: {},
    i18n: {
        navigationTitle: 'Bottom bar menu'
    },
    withSeparator: true,
    menu: [],
    pageId: ''
};

export default BottomBarMenu;
